Question

我试图跟踪网页上所有UI元素的事件。该页面包含动态生成的内容和各种框架/库。最初我通过创建一个css类跟踪元素＆＃34; track＆＃34; ，然后添加样式＆＃34; track＆＃34;跟踪元素。然后使用以下方法跟踪元素：

  $('.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跟踪所有元素＆＃39; *＆＃39;选择器。

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

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

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

小提琴src：

＆＃13;

$(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());
  });
});

＆＃13;

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

＆＃13;

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

您可能希望使用event delegation来定位所需的元素。优点是这也适用于动态生成的元素。请参阅代码以获取此示例。

// 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>包裹，否则将无法呈现。

＆＃13;

$(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());
    }
  });
});

＆＃13;

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

＆＃13;

跟踪页面上的所有元素

3 个答案: