跟蹤頁面上的所有元素

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>