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

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.com">I don't want #clickable to handle this click event.</a></div>

Answer 1

事件冒泡到DOM中附加单击事件的最高点。因此，在您的示例中，即使您在div中没有任何其他显式可单击元素，div的每个子元素都会将它们的Click事件泡到DOM上，直到DIV的Click事件处理程序捕获它为止。这有两种解决方案，一种是检查究竟是谁发起了这一事件。jQuery与事件一起传递一个eventargs对象：$("#clickable").click(function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;senderElement&nbsp;=&nbsp;e.target; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Check&nbsp;if&nbsp;sender&nbsp;is&nbsp;the&nbsp;<div>&nbsp;element&nbsp;e.g. &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;if($(e.target).is("div"))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;window.location&nbsp;=&nbsp;url; &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;true;});您还可以将一个单击事件处理程序附加到您的链接上，这些链接告诉它们停止事件冒泡在它们自己的处理程序执行之后：$("#clickable&nbsp;a").click(function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;//&nbsp;Do&nbsp;something &nbsp;&nbsp;&nbsp;e.stopPropagation();});

Answer 2

使用停止传播方法，请参见示例：$("#clickable&nbsp;a").click(function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;e.stopPropagation();});正如jQueryDocs所说：stopPropagation方法防止事件在DOM树上冒泡，从而防止任何父处理程序被通知该事件。请记住，它没有阻止其他侦听器处理此事件(前。一个按钮的多个单击处理程序)，如果它不是所期望的效果，则必须使用stopImmediatePropagation相反。

Answer 3

这里是我的解决方案，每个人都在寻找非jQuery代码(纯javascript)。document.getElementById("clickable").addEventListener("click",&nbsp;function(&nbsp;e&nbsp;){ &nbsp;&nbsp;&nbsp;&nbsp;e&nbsp;=&nbsp;window.event&nbsp;||&nbsp;e;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;if(this&nbsp;===&nbsp;e.target)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;put&nbsp;your&nbsp;code&nbsp;here &nbsp;&nbsp;&nbsp;&nbsp;}});如果单击父级的子类，则不会执行您的代码