如何倾听孩子们的心声;s儿童停止传播的事件

How to listen children's events when children stop propagation

本文关键字：事件 传播 心声 何倾听 倾听 孩子们      更新时间：2023-09-26

我需要在Document级别观看儿童事件，但如果儿童使用方法stopPropagation()停止传播，我将无法侦听这些事件在儿童中发生。

有人知道更好的方法吗？

EDIT：现在我想创建一个chrome扩展来监视DOM节点事件，但该事件可能会停止传播，并且向所有节点添加额外的侦听器不是一个好的做法。下面的例子将说明我的问题。

客户HTML片段

<body>
  <input type="button" value="Click Me" id="b">
</body>

客户javascript

var button = document.querySelector('#b');
button.addEventListener('click', function(e) {
  console.log('Button has been clicked');
  e.stopPropagation();
});

chrome扩展内容脚本

document.addEventListener('click', function(e) {
  console.log('Node(' + e.target.nodeName + ') has been clicked');
  // this listener will not be invoked because event has been stopped
  // propagation.
});

您可以使用"捕获"在冒泡之前跟踪事件。在这篇文章中，有一个非常好的描述捕捉是如何工作的（与冒泡相比）：冒泡和捕捉。

总之，除了IE9之前的IE之外，所有浏览器都会将事件沿链向下发送到事件发生的叶，然后将事件气泡返回。普通事件侦听只侦听实际对象上的事件或传播的事件，但如果将.addEventListener()的第三个参数设置为true，则它也将侦听链上的事件，在冒泡开始或取消之前，document对象将首先看到事件。

下面是一个工作片段演示：

// show output
function log(x) {
    var div = document.createElement("div");
    div.innerHTML = x;
    document.body.appendChild(div);
}
// stop propagation on leaf click
var leaf = document.getElementById("leaf");
leaf.addEventListener("click", function(e) {
  log("leaf message - click in leaf, propagation stopped")
  e.stopPropagation();
}, false);
// capture listen
document.addEventListener("click", function(e) {
  if (e.target === leaf) {
  	log("document message - click in leaf");
  }
}, true);
<div id="topParent">
  <div id="midParent">
    <div id="leaf">
    Click Here
    </div>
  </div>
</div>

相关文章：