如何停止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);