当子锚被单击时，如何防止父的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>

当前回答

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

event.stopImmediatePropagation()

从这个解。

其他回答

使用stopPropagation方法，见示例:

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

正如jQuery文档所说:

stopPropagation方法防止事件在DOM中冒泡树，防止任何父处理程序被通知该事件。

请记住，它不会阻止其他侦听器处理此事件(例如。)，如果不是想要的效果，你必须使用stopImmediatePropagation代替。

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

event.stopImmediatePropagation()

从这个解。

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

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

要指定某些子元素为不可点击的，请按照下面的示例编写css层次结构。

在这个例子中，我停止传播到一个类为".subtable"的表中td和tr中的任何元素(*)

$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});

这就是你要找的

mousedown事件。这适用于每个DOM元素，以防止javascript的焦点处理程序，像这样:

$('.no-focus').mousedown(function (e) {
   e.prevenDefault()

   // do stuff
}

在vue.js框架中，你可以这样使用修饰符:

<span @mousedown.prevent> no focus </span>

注意，使用on输入将阻止文本选择处理程序

推荐文章