如何在单击子锚点时阻止父级的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;
});

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

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

Answer 2

使用stopPropagation方法,请参阅示例:

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

正如jQuery Docs所说:

stopPropagation 方法可防止事件冒泡DOM树,从而阻止任何父处理程序收到事件通知.

请记住,它不会阻止其他侦听器处理此事件(例如,按钮的多个单击处理程序),如果它不是所需的效果,则必须使用stopImmediatePropagation.

Answer 3

这里我的解决方案适合所有人寻找非jQuery代码(纯javascript)

document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }
});

如果单击父项的子项,则不会执行您的代码

Answer 4

你也可以试试这个

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === 'div')
   {
       // do something here 
   } 
   else
   {
      //do something with <a> tag
   }
});

Answer 5

如果您不想在任何情况下与内部元素交互,那么CSS解决方案可能对您有用.

只需将内部元素设置为 pointer-events: none

在你的情况下:

.clickable > a {
    pointer-events: none;
}

或者通常针对所有内部元素:

.clickable * {
    pointer-events: none;
}

在使用ReactJS进行开发时,这个简单的黑客为我节省了大量时间

浏览器支持可以在这里找到:http://caniuse.com/#feat=pointer-events

Answer 6

内联替代方案：

<div>
    <!-- Other content. -->
    <a onclick='event.stopPropagation();' href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

Answer 7

我比较不可用的ev.currentTarget时间this（React 等）。

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

Answer 8

使用return false;或e.stopPropogation();不允许执行更多代码.它会在此时停止流动.

Answer 9

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

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

Answer 10

如果有人需要写作(为我工作):

event.stopImmediatePropagation()

从这个解决方案.