如何在JavaScript中停止事件捕获？

Question

我们可以使用 event.stopPropagation() 来停止事件冒泡。那么我们能否使用同样的方法来停止事件捕获呢？

如果不行，我们该如何实现？

- Anusha Nilapu

Answer 1

如果监听器被添加到捕获阶段而不是冒泡阶段，则可以使用相同的方法阻止事件向下传递到子元素：event.stopPropagation()。

例如，在此代码中，您会发现#inner的监听器从未被触发，因为#outer的监听器停止了事件向下传播：

document.querySelector('#outer').addEventListener(
  'click',
  function(event) {
    console.log('propagation stopped');
    event.stopPropagation();
  },
  true // Add listener to *capturing* phase
);

document.querySelector('#inner').addEventListener(
  'click',
  function(e) {
    console.log('inner clicked');
  }
);

<div id="outer">
  outer
  <div id="inner">
    inner
  </div>
</div>

- CertainPerformance

Answer 2

在调用addEventListener()函数时，应将第三个参数传递为false。这将禁用事件捕获阶段。

document.body.addEventListener('click', onClickFunc, false);

- poltorin

---

这是谷歌介绍的一种破坏常用方法的代码。 - Raphael