javascript 防止嵌套元素触发父元素的事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18409551/
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
Prevent nested elements from triggering an event for parent element
提问by Narong
Structure:
结构：
.parent (has if/else to toggle on click) -> .child (has nothing)
.parent (has if/else to toggle on click) -> .child (has nothing)
<div class="parent">Parent
<div class="child">Child</div>
</div>
The parent element is styled to hide overflowing content and toggle its height on click. When the user clicks, the parent element will expand to show the child element. I want users to be able to click on the child element without the parent element toggling back to its original size and hiding the child element. I want the toggle to only happen on the parent.
父元素的样式设置为隐藏溢出的内容并在单击时切换其高度。当用户单击时，父元素将展开以显示子元素。我希望用户能够单击子元素，而父元素不会切换回其原始大小并隐藏子元素。我希望切换只发生在父级上。
I realize the child element is still contained within the parent element's clickable area, but is there a way to exclude it?
我意识到子元素仍然包含在父元素的可点击区域内，但有没有办法排除它？
回答by Dallas
Solution 1: Compare target with currentTarget:
解决方案 1：将目标与当前目标进行比较：
$("#parentEle").click( function(e) {
if(e.target == e.currentTarget) {
alert('parent ele clicked');
} else {
//you could exclude this else block to have it do nothing within this listener
alert('child ele clicked');
}
});
e.targetwill be the element that started the event.e.currentTargetwill be where it currently is (bubbling up) which will be parentElein this click event as that's what this is listening for.
e.target将是启动事件的元素。e.currentTarget将是它当前所在的位置（冒泡），它将parentEle在此单击事件中，因为这就是它正在侦听的内容。
If they are the same, you know the click was directly on the parent.
如果它们相同，您就知道点击直接发生在父级上。
Solution 2: Stop the propagation before the event hits the parentEle:
解决方案 2：在事件到达 parentEle 之前停止传播：
The other option is to prevent the event from bubbling up in the first place if there is a click on a child element. That can be done like this:
另一种选择是在单击子元素时首先防止事件冒泡。可以这样做：
$("#parentEle").click( function(e) {
alert('parent ele clicked');
});
$("#parentEle").children().click( function(e) {
//this prevent the event from bubbling to any event higher than the direct children
e.stopPropagation();
});
The main difference between the two is that the first solution will just ignore the event in this listener and allow it to keep bubbling up. This may be necessary if you have a parent of this parentElethat needs to get the event.
两者之间的主要区别在于，第一个解决方案将忽略此侦听器中的事件并允许它继续冒泡。如果您有parentEle需要获取事件的父级，这可能是必要的。
The second solution stops any click events from bubbling past parentEle's direct children. So if there was a click event on a parent of parentEle, they would never see these events either.
第二种解决方案阻止任何点击事件冒泡过去parentEle的直接子级。因此，如果 的父级上有点击事件parentEle，他们也永远不会看到这些事件。
回答by Farhan
Use event.stopPropagation();:
使用event.stopPropagation();：
$('#a').add('#b').click(fun1);
function handler(event) {
event.stopPropagation();
// now do your stuff
}
