children停止传播时如何监听children的事件

Question

我需要在Document关卡观看儿童事件，但是如果儿童使用方法stopPropagation()停止传播，我无法收听儿童发生的那些事件。

有人知道更好的方法吗？

编辑：现在我想创建一个 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.
});

Answer 1

您可以使用 "capturing" 在冒泡之前跟踪事件。这篇文章很好地描述了捕获的工作原理（与冒泡相比）：Bubbling and capturing.

总而言之，除 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>

children停止传播时如何监听children的事件

How to listen children's events when children stop propagation

html

javascript

events

listener

stoppropagation