jQuery停止子事件触发父事件

Question

jQuery停止子事件触发父事件

我有一个div，我已经附加了一个onclick事件到。在这个div中有一个带有链接的标记。当我单击链接时，onclick事件也会被触发。如何禁用此功能，以便在div上单击链接onclick不是被解雇的？

剧本：

$(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();    });});如果你想阅读更多关于.topPropagation()的内容，请看这里.

Answer 2

或者，与其使用额外的事件处理程序来防止另一个处理程序，还可以使用事件对象参数传递给单击事件处理程序，以确定是否单击了子元素。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

用更好的方法关于()用链子，$(document).ready(function(){     $(".header").on('click',function(){         $(this).children(".children").toggle();     }).on('click','a',function(e) {         e.stopPropagation();    });});