跟踪页面上的所有元素

Question

我正在尝试跟踪页面上所有UI元素的事件。 该页面包含动态生成的内容和各种框架/库。 最初，我通过创建css类“ track”来跟踪元素，然后将样式“ track”添加到跟踪的元素。 然后使用以下元素跟踪元素：

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

由于可以动态生成内容，因此我也需要一种跟踪这些元素的方法。 因此，使用通配jQuery运算符尝试了此操作。

在这个小提琴中： https : //jsfiddle.net/xx68trhg/37/我正在尝试使用jquery'*'选择器跟踪所有元素。

使用jQuery'*'选择器似乎会触发给定类型的所有元素的事件。 因此，对于这种情况，如果单击，则会为所有div触发所有click事件。 但是id只能用于被单击的div。

对于th元素，单击事件被触发两次，这是什么原因？

是否可以修改仅针对当前选定事件触发事件的源？

小提琴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

您可以尝试：

$(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

您可能想使用事件委托来定位所需的元素。 优点是，这也适用于动态生成的元素。 有关示例，请参见代码。

 // 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

您可以调用stopPropagation和条件this === e.currentTarget以确保调用事件源DOM的处理函数。

并且您必须知道<th>标记必须由<table>包装，否则它将不会呈现。

 $(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>