jQuery停止孩子触发父事件

我有一个div，我已经附加了一个onclick事件。在这个div中有一个带有链接的标签。当我单击链接时，onclick也会触发来自div 的事件。我如何禁用此功能，以便如果在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>

做这个：

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

如果您想了解更多有关.stopPropagation（）的信息，请查看此处。

或者，可以使用传递给click事件处理程序的Event Object参数来确定是否单击了子级，而不是使用额外的事件处理程序来防止其他处理程序。target将是clicked元素，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();
});

更好的方法是使用on（）和链式链接，

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

这里的答案从字面上完全理解了OP的问题。如何将这些答案扩展到存在许多子元素而不仅仅是一个<a>标签的情况下？这是一种方法。

假设您有一个带有黑色背景的照片库，并且照片集中在浏览器中。单击黑色背景（但不单击其中的任何内容）时，您要关闭叠加层。

以下是一些可能的HTML：

<div class="gallery" style="background: black">
    <div class="contents"> <!-- Let's say this div is 50% wide and centered -->
        <h1>Awesome Photos</h1>
        <img src="img1.jpg"><br>
        <img src="img2.jpg"><br>
        <img src="img3.jpg"><br>
        <img src="img4.jpg"><br>
        <img src="img5.jpg">
    </div>
</div>

这是JavaScript的工作方式：

$('.gallery').click(
    function()
    {
        $(this).hide();
    }
);

$('.gallery > .contents').click(
    function(e) {
        e.stopPropagation();
    }
);

这将停止.contents来自每个研究内部元素的点击事件，.gallery因此，仅当您在褪色的黑色背景区域中单击时，画廊才会关闭，而在内容区域中单击时，画廊不会关闭。这可以应用于许多不同的场景。

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

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

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

或这个：

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

最简单的解决方案是将此CSS添加到子级：

.your-child {
    pointer-events: none;
}

一种更短的方法：

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