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

您可以使用＆＃34;捕获＆＃34;在冒泡之前跟踪事件。在本文中，我们非常清楚地描述了捕获的工作方式（与冒泡相反）：Bubbling and capturing。

总之，IE9之前除了IE之外的所有浏览器，都会将链中的事件发送到发生事件的叶子，然后将事件冒泡回来。正常事件侦听仅侦听实际对象或传播事件上的事件，但如果将第三个参数设置为.addEventListener()为true，那么它还将侦听{{1}链中的事件。在冒泡甚至开始或被取消之前，对象将看到事件FIRST。

这是一个工作片段演示：

＆＃13;

document

＆＃13;

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

＆＃13;

如何在儿童停止传播时聆听儿童的事件

1 个答案: