stopPropagation原生事件vs javascript事件

Question

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

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

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

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

//为什么处理程序警报（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事件和本机事件。如果原生事件在某处不是preventDefault()或return false，则无论是stopPropagation()还是{{1}}，都会触发。

Answer 2

  

为什么stopPropagation会阻止处理程序冒泡   事件，但它需要preventDefault不遵循链接？

嗯，你解释得很好。

正在遵循链接的默认行为。防止默认是阻止它被跟踪。

传播行为是事件冒泡到父级，防止传播停止冒泡到父级。这跟链接不同，因为链接后跟链接本身没有附加到其父级，因此，它仍然存在。

return false;如果我没记错的话告诉jQuery同时做这两件事。

<强>更新

我看到你将处理程序与链接区分开来，基于此，我认为这是你的答案：

jQuery stopPropagation not working when applied to textbox inside anchor