如何防止在单击子锚定时触发父级的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.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) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

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

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