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

我目前正在使用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>

#1楼

如果可点击div中有多个元素，则应执行以下操作：

$('#clickable *').click(function(e){ e.stopPropagation(); });

#2楼

使用stopPropagation方法，请参见示例：

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

正如jQuery Docs所说：

stopPropagation方法可防止事件使DOM树冒泡，从而防止任何父处理程序收到该事件的通知。

请记住，这不会阻止其他侦听器处理此事件 （例如，一个按钮有多个单击处理程序），如果这不是期望的效果，则必须改用stopImmediatePropagation 。

#3楼

<a onclick="return false;" href="http://foo.com">I want to ignore my parent's onclick event.</a>

#4楼

事件冒泡至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();
});

#5楼

添加a如下：

<a href="http://foo.com" onclick="return false;">....</a>

或return false; 来自#clickable点击处理程序，例如：

  $("#clickable").click(function() {
        var url = $("#clickable a").attr("href");
        window.location = url;
        return false;
   });

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3206647

标签

return

click