Jquery停止子事件触发父事件

我有一个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>
201018 次浏览
小开
最佳答案

这样做:

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

如果你想阅读更多关于.stopPropagation()的信息，看这里。

小开

或:

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

更好的方法是使用在()和链接，比如，

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

这里的回答太字面化了。这些答案如何扩展到有许多子元素的场景，而不仅仅是一个<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中的元素的点击事件，因此只有当你在褪色的黑色背景区域单击时，图库才会关闭，而当你在内容区域单击时不会关闭。这可以应用于许多不同的场景。

小开

或者，与其使用额外的事件处理程序来防止另一个处理程序，不如使用传递给单击事件处理程序的事件对象参数来确定是否单击了子事件。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();
});
小开

我无意中发现了这个问题，在寻找另一个答案。

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

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

最简单的解决方案是将CSS添加到子节点:

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

提交答案