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();
   });});