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

Question

我们可以使用event.stopPropagation()来阻止事件冒泡。我们可以使用相同的方法来停止事件捕获吗？

如果没有，我们怎么能实现呢？

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>

Answer 2

你应该将false作为3参数传递给addEventListener。它禁用事件捕获阶段。

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