单击子锚点时，如何防止触发父级的 onclick 事件？

Question

我目前正在使用 jQuery 来制作可点击的 div，并且在这个 div 中我也有锚点。我遇到的问题是，当我点击一个锚点时，两个点击事件都在触发（对于 div 和锚点）。单击锚点时，如何防止 div 的 onclick 事件触发？

这是损坏的代码：

JavaScript

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

HTML

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.example">I don't want #clickable to handle this click event.</a>
</div>

原文由 Jonathon Watney 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

事件冒泡到 DOM 中附加点击事件的最高点。因此，在您的示例中，即使您在 div 中没有任何其他显式可单击元素，div 的每个子元素也会将其单击事件在 DOM 中冒泡，直到 DIV 的单击事件处理程序捕获它。

有两种解决方案是检查谁实际发起了该事件。 jQuery 将 eventargs 对象与事件一起传递：

 $("#clickable").click(function(e) {
 var senderElement = e.target;
 // Check if sender is the <div> element eg
 // if($(e.target).is("div")) {
 window.location = url;
 return true;
 });

您还可以将点击事件处理程序附加到您的链接，告诉他们在自己的处理程序执行后 停止事件冒泡：

 $("#clickable a").click(function(e) {
 // Do something
 e.stopPropagation();
 });

原文由 Rex M 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 stopPropagation 方法，看一个例子：

 $("#clickable a").click(function(e) {
   e.stopPropagation();
});

正如 jQuery Docs 所说：

stopPropagation 方法防止事件冒泡DOM树，防止任何父处理程序被通知事件。

请记住，它不会 阻止其他侦听器处理此事件（例如，一个按钮的多个点击处理程序），如果它不是预期的效果，您必须使用 stopImmediatePropagation 代替。

原文由 Cleiton 发布，翻译遵循 CC BY-SA 3.0 许可协议