Question

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

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

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

这里的答案太过于字面意思地解决了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的{{1}}内的元素的点击事件，因此只有当您点击褪色的黑色背景区域时才会关闭图库，但是当您点击内容区域时不会。这可以应用于许多不同的场景。

Answer 5

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

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

这是最简单，最易读的方法：

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

Answer 6

或者这个：

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

Answer 7

更简短的方法：

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

Answer 8

最简单的解决方案是将这个CSS添加到孩子们身上：

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

jquery停止孩子触发父事件

8 个答案: