跟踪页面上的所有元素

Question

I'm attempting to track events for all UI elements on a page. The page contains dynamically generated content and various frameworks / libraries. Initially I tracked elements through creating a css class "track" , then adding style "track" to tracked elements. elements are then tracked using :

  $('.track').on('click', function() {
    console.log('Div clicked' + this.id);
    console.log(window.location.href);
    console.log(new Date().getTime());
  });

As content can be dynamically generated I wanted a method to track these elements also. So tried this using wildcard jQuery operator.

In this fiddle : https://jsfiddle.net/xx68trhg/37/ I'm attempting to track all elements using the jquery '*' selector.

Using jQuery '*' selector appears to fire the event for all elements of given type. So for this case if is clicked all the click event is fired for all divs. But id is just available for div being clicked.

For the th element the click event is fired twice , what is reason for this ?

Can the source be modified that event is fired for just currently selected event ?

fiddle src :

 $(document).ready(function() { $('*').each(function(i, ele) { $(this).addClass("tracked"); }); $('.tracked').on('click', function() { console.log('Div clicked' + this.id); console.log(window.location.href); console.log(new Date().getTime()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- <div id="1" data-track="thisdiv"> Any clicks in here should be tracked </div> --> <div id="1"> Any clicks in here should be tracked 1 </div> <div id="2"> Any clicks in here should be tracked 2 </div> <div id="3"> Any clicks in here should be tracked 3 </div> <th id="th">tester</th> 

Answer 1

You can try with:

$(document).ready(function() {
    $("body > *").click(function(event) {
      console.log(event.target.id);
    });
});

 $(document).ready(function() { $("body > *").click(function(event) { console.log(event.target.id); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="1"> Any clicks in here should be tracked 1 </div> <div id="2"> Any clicks in here should be tracked 2 </div> <div id="3"> Any clicks in here should be tracked 3 </div> <table> <tr> <td>Cols 1</td> <td id="td">Cols 2</td> </tr> </table> <p id="th">tester</p> 

Answer 2

You may want to use event delegation to target the elements you need. Advantage is that this also works for dynamically generated elements. See code for an example of this.

 // method to add/set data-attribute and value const nClicksInit = (element, n = "0") => element.setAttribute("data-nclicked", n); // add data-attribute to all current divs (see css for usage) // btw: we can't use the method directly (forEach(nClicksInit)) // because that would send the forEach iterator as the value of parameter n document.querySelectorAll("div").forEach(elem => nClicksInit(elem)); // add a click handler to the document body. You only need one handler method // (clickHandling) to handle all click events document.querySelector('body').addEventListener('click', clickHandling); function clickHandling(evt) { // evt.target is the element the event is generated // from. Now, let's detect what was clicked. If none of the // conditions hereafter are met, this method does nothing. const from = evt.target; if (/^div$/i.test(from.nodeName)) { // aha, it's a div, let's increment the number of detected // clicks in data-attribute nClicksInit(from, +from.getAttribute("data-nclicked") + 1); } if (from.id === "addDiv") { // allright, it's button#addDiv, so add a div element let newElement = document.createElement("div"); newElement.innerHTML = "My clicks are also tracked ;)"; const otherDivs = document.querySelectorAll("div"); otherDivs[otherDivs.length-1].after(newElement); nClicksInit(newElement); } } 

 body { font: 12px/15px normal verdana, arial; margin: 2em; } div { cursor:pointer; } div:hover { color: red; } div:hover:before { content: '['attr(data-nclicked)' click(s) detected] '; color: green; } #addDiv:hover:after { content: " and see what happens"; } 

 <div id="1"> Click me and see if clicks are tracked </div> <div id="2"> Click me and see if clicks are tracked </div> <div id="3"> Click me and see if clicks are tracked </div> <p> <button id="addDiv">Add a div</button> </p> <h3 id="th">No events are tracked here, so clicking doesn't do anything</h3> 

Answer 3

You can invoke the stopPropagation and the condition this === e.currentTarget to ensure invoke the handler function of the event source DOM.

And you must know the <th> tag must wrapped by <table> , otherwise it will not be rendered.

 $(document).ready(function() { $('*').each(function(i, ele) { $(this).addClass("tracked"); }); $('.tracked').on('click', function(e) { if (this === e.currentTarget) { e.stopPropagation(); console.log('Div clicked' + this.id); console.log(window.location.href); console.log(new Date().getTime()); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- <div id="1" data-track="thisdiv"> Any clicks in here should be tracked </div> --> <div id="1"> Any clicks in here should be tracked 1 </div> <div id="2"> Any clicks in here should be tracked 2 </div> <div id="3"> Any clicks in here should be tracked 3 </div> <table> <th id="th">tester</th> </table>