jquery停止孩子触发父事件

Question

我有一个div,我附上了一个onclick事件.在这个div中有一个带链接的标签.当我点击链接时,onclick也会触发div中的事件.如何禁用此功能,以便在单击链接时onclick不会触发div ？

脚本:

$(document).ready(function(){
    $(".header").bind("click", function(){
         $(this).children(".children").toggle();
    });
})

HTML代码:

<div class="header">
    <a href="link.html">some link</a>
    <ul class="children">
        <li>some list</li>
    </ul>
</div>

Answer 1

做这个:

$(document).ready(function(){
    $(".header").click(function(){
        $(this).children(".children").toggle();
    });
   $(".header a").click(function(e) {
        e.stopPropagation();
   });
});

如果你想了解更多关于.stopPropagation()的信息,请看这里.

Answer 2

或者,您可以使用传递给Click事件处理程序的Event Object参数来确定是否单击了子项,而不是使用额外的事件处理程序来阻止其他处理程序.target将是单击的元素,currentTarget将成为.header div:

$(".header").click(function(e){
     //Do nothing if .header was not directly clicked
     if(e.target !== e.currentTarget) return;

     $(this).children(".children").toggle();
});

Answer 3

使用on()和链接更好的方式,

$(document).ready(function(){
    $(".header").on('click',function(){
        $(this).children(".children").toggle();
    }).on('click','a',function(e) {
        e.stopPropagation();
   });
});

Answer 4

我偶然发现了这个问题，正在寻找另一个答案。

我想防止所有孩子触发父母。

JavaScript：

document.getElementById("parent").addEventListener("click", function (e) {
    if (this !== event.target) return;
    // Do something
});

jQuery：

$("#parent").click(function () {
    // Do something
}).children().on("click", function (e) {
    e.stopPropagation();
});