jQuery jquery停止子触发父事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2364629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery stop child triggering parent event
提问by John
I have a div which I have attached an onclickevent to. in this div there is a tag with a link. When I click the link the onclickevent from the div is also triggered. How can i disable this so that if the link is clicked on the div onclickis not fired?
我有一个已附加onclick事件的 div 。在这个 div 中有一个带有链接的标签。当我点击链接时，onclick来自 div的事件也被触发。如何禁用此功能，以便在 div 上单击链接时onclick不会触发？
script:
脚本：
$(document).ready(function(){
$(".header").bind("click", function(){
$(this).children(".children").toggle();
});
})
html code:
html代码：
<div class="header">
<a href="link.html">some link</a>
<ul class="children">
<li>some list</li>
</ul>
</div>
回答by Nick Craver
Do this:
做这个：
$(document).ready(function(){
$(".header").click(function(){
$(this).children(".children").toggle();
});
$(".header a").click(function(e) {
e.stopPropagation();
});
});
If you want to read more on .stopPropagation(), look here.
回答by xr280xr
Or, rather than having an extra event handler to prevent another handler, you can use the Event Objectargument passed to your click event handler to determine whether a child was clicked. targetwill be the clicked element and currentTargetwill be the .header div:
或者，您可以使用传递给单击事件处理程序的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();
});
回答by Rohan Kumar
回答by Gavin
The answers here took the OP's question too literally. How can these answers be expanded into a scenario where there are MANY child elements, not just a single <a>tag? Here's one way.
这里的答案从字面上理解了 OP 的问题。如何将这些答案扩展到有许多子元素而不仅仅是单个<a>标签的场景？这是一种方法。
Let's say you have a photo gallery with a blacked out background and the photos centered in the browser. When you click the black background (but not anything inside of it) you want the overlay to close.
假设您有一个背景变黑的照片库，并且照片在浏览器中居中。当您单击黑色背景（但不是其中的任何内容）时，您希望覆盖层关闭。
Here's some possible HTML:
以下是一些可能的 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>
And here's how the JavaScript would work:
以下是 JavaScript 的工作方式：
$('.gallery').click(
function()
{
$(this).hide();
}
);
$('.gallery > .contents').click(
function(e) {
e.stopPropagation();
}
);
This will stop the click events from elements inside .contentsfrom every research .galleryso the gallery will close only when you click in the faded black background area, but not when you click in the content area. This can be applied to many different scenarios.
这将停止.contents来自每个研究内部元素的点击事件，.gallery因此只有当您单击褪色的黑色背景区域时图库才会关闭，而不会在您单击内容区域时关闭。这可以应用于许多不同的场景。
回答by Daan
I stumbled upon this question, looking for another answer.
我偶然发现了这个问题，正在寻找另一个答案。
I wanted to prevent all childrenfrom triggering the parent.
我想防止所有孩子触发父母。
JavaScript:
JavaScript：
document.getElementById("parent").addEventListener("click", function (e) {
if (this !== event.target) return;
// Do something
});
jQuery:
jQuery：
$("#parent").click(function () {
// Do something
}).children().on("click", function (e) {
e.stopPropagation();
});
回答by Pier
The simplest solution is to add this CSS to the children:
最简单的解决方案是将此 CSS 添加到子项：
.your-child {
pointer-events: none;
}
回答by user719004
Or this:
或这个：
$(document).ready(function(){
$(".header").click(function(){
$(this).children(".children").toggle();
});
$(".header a").click(function(e) {
return false;
});
});
回答by Andreas 'aNdy' Berggreen
A more short way to do it:
一种更简短的方法：
$('.header').on('click', function () {
$(this).children('a').on('click', function(e) {
e.stopPropagation();
$(this).siblings('.children').toggle();
});
});
