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