javascript - stopPropagation native 事件与 JavaScript 事件

Question

这个问题已经有答案了:

What's the difference between event.stopPropagation and event.preventDefault? (9 个回答)

已关闭 10 年前。

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

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

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

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

//为什么处理程序alert(1)的事件无效，但链接后面的事件却无效？

Answer 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 事件和 native 事件。如果 native 事件不是 preventDefault()或return false在某个地方，无论任何stopPropagation()它都会着火。 .