stopPropagation 本机事件与 javascript 事件 [重复]答案

【问题标题】：stopPropagation native event vs javascript event [duplicate]stopPropagation 本机事件与 javascript 事件 [重复]
【发布时间】：2013-06-09 05:37:41
【问题描述】：

我在这里回答了一个问题，我偶然发现了一个奇怪的行为。 Check this demo

效果很好。我正在添加事件处理程序，当我单击我拥有的图像时 alert(2) 不触发链接处理程序alert(1)。奇怪的是，如果我删除 preventDefault, alert(1) 仍然没有触发，但它遵循链接。为什么 stopPropagation 会阻止处理程序冒泡事件，但它需要 preventDefault 才能不跟随链接？

这纯粹是出于教育原因。我只是想了解发生了什么。

//编辑请在回答之前查看演示。我在两个不同的元素上有处理程序。尽管 stopPropagation 阻止父元素的处理程序触发，但它不会阻止它跟随链接。但是不停止传播，防止事件冒泡吗？它不会使父元素的事件无效吗？

//为什么处理程序alert(1)的事件无效但链接的following没有？

【问题讨论】：

不，我读过这篇文章。我实际上将它粘贴在我正在谈论的答案上。请看演示。
我认为这个问题很好地回答了你的问题。 preventDefault 和 stopPropagation 做不同的事情。 preventDefault 停止 浏览器的 操作，stopPropegation 阻止事件传播。
是的，我同意，但是，您说“stopPropegation 阻止事件传播”，那么为什么它会到达链接标签并跟随链接？
嗯，不是吗？如果您click the image（左上角很小且破损。您只会看到2 而不是1。
我没这么说。我知道我的例子做了什么，这就是它困扰我的原因。当它没有警告（1）时，为什么它会跟随链接？它可以正常使用警报，但不能使用以下链接

标签： javascript jquery event-handling

【解决方案1】：

Javascript 中的所有事件都在与之交互的最外层元素上触发，然后在其祖先中的每个元素上再次触发，直到它到达body。这样，事件首先在您的img 上触发，然后在您的a 上再次触发，因为您的img 在a 内。

如果不需要这种行为，这就是为什么你会使用stopPropagation 来防止它在链上冒泡。在 jQuery 中，很容易检查是哪个元素引发了该事件，因此在某些情况下您可以使用 event.target 忽略它。

if (e.target == this) { 
  // run code only when this element is the originator of the event 
}

当点击事件被触发时，基本上有两个脉络，Javascript 事件和本机事件。如果本地事件不是 preventDefault() 或 return false 某处，它将触发，无论任何 stopPropagation()。

【讨论】：

"All events in Javascript fire on the outermost element interacted with" 这实际上不是真的。请参阅 addEventListener 中的 useCapture 可选标志。您可以设置一个事件来命中一个元素，然后再将其分派到 DOM 树中该元素之下的元素。
与useCapture 事件仍然冒泡。它从最外层的元素一直冒泡，一直向上寻找useCapture = true 事件，然后再通过useCapture = false。看到这个小提琴：jsfiddle.net/Af6AU.
这就是我在帖子中所说的。既然 stopPropagation() 对此很清楚，为什么它会跟随链接（虽然它没有 alert(1)）？
stopPropagation 对链接是否指向您的浏览器没有正面或负面的影响。这仅由preventDefault 或return false 处理。
是的，但为什么呢？既然通过 stopPropagation 停止冒泡，那么是什么触发了链接的跟随？

【解决方案2】：

stopPropagation 怎么会阻止处理程序冒泡事件，但它需要 preventDefault 才能不跟随链接？

嗯，你解释得很好。

正在遵循链接的默认行为。阻止默认值就是阻止它被遵循。

传播行为是将事件冒泡到父级，阻止传播停止向父级冒泡。这与跟随链接不同，因为跟随链接是与链接本身相关的东西，没有附加到其父级，所以它仍然存在。

return false; 如果我没记错的话告诉 jQuery 两者都做。

更新：

我看到你正在区分处理程序和链接，基于此，我认为这是你的答案：

jQuery stopPropagation not working when applied to textbox inside anchor

【讨论】：

很抱歉，如果 stopPropegation 阻止事件到达父级，则意味着它不应到达要跟随的链接标签。我错过了什么？
这就是发生在我身上的事。在你的小提琴中，至少在 Chrome 中，当我评论 preventDefault 时，如果我单击图像占位符（那里没有真实图像），我只会收到警报 2，如果我点击链接的其余部分，我只会收到警报 1
父是链接。单击 img 是传播的事件。
检查更新的答案。
是的，这回答了我的问题。不过只能点赞。 Nucleon 首先回答。