jquery停止子触发父事件

Question

我有一个 div，我附加了一个 onclick 事件。在这个 div 中有一个带有链接的标签。当我单击链接时，也会触发来自 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();
   });
});

如果你想read more on .stopPropagation(), look here。

Answer 2

或者，您可以使用传递给单击事件处理程序的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();
});

Answer 5

这里的答案太从字面上理解了 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();
    }
);

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

Answer 6

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

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

Answer 7

或者这个：

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