e.stopPropagation() 等效于点击事件的捕获阶段？答案

【问题标题】：e.stopPropogation() Equivalent for Capture Phase of Click Event?e.stopPropagation() 等效于点击事件的捕获阶段？
【发布时间】：2015-05-29 16:06:28
【问题描述】：

我正在 JS 中寻找一种方法来阻止单击事件在单击父元素时继续沿 DOM 向下到嵌套的子元素（捕获阶段）。

这将与 e.stopPropogation() 函数相反，以防止点击事件冒泡。

这个有原生的JS函数吗？

编辑 03/10 Link to example

编辑 03/11 函数调用中的错字 - 它是 stopPropagation()，而不是 stopPropogation()。感谢@JackPattishall 的发现。

【问题讨论】：

事件不会冒泡。如果子元素上的处理程序正在触发，那是因为您单击了它。
stopPropagation 还将在捕获阶段停止事件：jsfiddle.net/oc3cec8b
@WillReese：他们确实“冒泡”。有一个捕获阶段，然后是一个冒泡阶段。这就是addEventListener 有第三个参数的原因。
@zacc206 啊，你想要stopPropagation 我的朋友:) （a 而不是o）- 叉形笔：codepen.io/anon/pen/EadPGK
@JackPattishall Aaah。谢谢，我以为我已经检查过了，但无论如何我错过了。感谢您的帮助

标签： javascript jquery

【解决方案1】：

是的，有用于在捕获阶段捕获事件的原生 js 函数。

在所有浏览器中，除了 IE

事件首先下降 - 这称为捕获，然后冒泡。此行为已在 W3C 规范中标准化。

所有事件处理方法都会忽略捕获阶段。使用最后一个参数为 true 的 addEventListener 只是在捕获时捕获事件的方法。

elem.addEventListener(类型、处理程序、阶段)

相位 = 真处理程序设置在捕获阶段。相位 = 假处理程序设置在冒泡阶段。

为了更好地理解事件捕获和冒泡，您可以关注link

【讨论】：

感谢您的回复，我已经牢牢掌握了捕获阶段，但唯一的问题是点击事件一直持续到父级一直到最低级别的子级 - 我我希望防止什么。 eventPropogation 中断了冒泡阶段，但是有没有中断捕获阶段的函数？
@zacc206：您的事件是否与 jQuery 绑定？它（不幸的是）在原生事件系统上使用了自己的特殊抽象，我不相信他们认识到事件捕获的现实。
@LyeFish 我相信是的，它是专门的 Kendo UI 小部件。

【解决方案2】：

好的，你要做的一件事是使用 Dom 顶部的 stopPropogation()。

例如。你有一个表（#table1）和元素（tr，td）。所以，如果我这样做：

table1.addEventListener("click",function(event){
  event.stopPropagation();
  console.log(this);
},true);
tableElem[2].addEventListener("click",function(event){
  console.log(this);
});
tableElem[2].addEventListener("click",function(event){
  console.log("hii");
});

该事件将在顶部被拦截并停止传播。 stopPropogation() 停止传播，无论拦截哪个 step 事件。

【讨论】：