当子锚被单击时，如何防止父的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.example">I don't want #clickable to handle this click event.</a>
</div>

当前回答

添加a如下:

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

或者返回false;从点击处理程序#clickable像:

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

其他回答

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

您需要阻止事件到达父节点(div)(冒泡)。请参阅此处关于冒泡的部分，以及此处特定于jquery的API信息。

如果它在内联上下文中，在HTML中尝试这样做:

onclick="functionCall();event.stopPropagation();

如果你在可点击的div中有多个元素，你应该这样做:

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

使用返回false;或e.stopPropogation ();将不允许执行其他代码。它会在这一点停止流动。

推荐文章