如何捕获stopPropagation事件

Question

例如，我们有一个带有onclick事件侦听器的链接的页面。但是处理程序制造了stopPropagation。如果click事件不再是泡泡，我该如何处理它呢？

例如：

document.addEventListener('click', function(e) {console.log(e);});
a.onclick = function(e) {e.stopPropagation();};

Answer 1

DOM事件传播分为三个阶段:捕获阶段、目标阶段和气泡阶段。粗略地说，事件首先工作到目标，到达目标，然后返回。

默认情况下，事件处理程序在最后的气泡阶段附加。如果在第一个捕获阶段附加了一个单击事件侦听器，它将在前一个处理程序有机会调用stopPropagation之前运行。

有关更深入的解释，请参见this question。

Answer 2

简单的答案是，在添加事件侦听器**时，true**，添加了第三个参数，。

document.addEventListener('click', someFunction, true)

)将对文档中的所有单击调用someFunction，即使用户在一个元素中单击一个名为event.stopPropagation的单击处理程序时也是如此。

有选择

如果您已经将选项对象作为第三个参数传递，只需在其中包含capture: true：

document.addEventListener('click', someFunction, { capture: true, ...someMoreOptions })

为什么？

像这样启用处理程序的useCapture模式意味着侦听器在事件的早期“捕获”阶段(从最外层元素开始，然后通过子元素向下传输)侦听，而不是后面的“冒泡”阶段(从最内部的元素开始，通过祖先返回气泡，是唯一的stopPropagation块)。

副作用

这也意味着应用此设置会改变时间:捕获阶段单击事件将发生在子元素或子元素中的任何类型的单击事件之前。

例如，在上面的函数中，如果用户单击页面上的一个按钮，附加到document捕获阶段的document将在任何附加到该按钮的处理程序之前被调用；而如果没有将user设置为true，则会期望在此之后调用它。