防止嵌套元素触发父元素的事件答案

【问题标题】：Prevent nested elements from triggering an event for parent element防止嵌套元素触发父元素的事件
【发布时间】：2013-08-26 21:38:38
【问题描述】：

结构：

.parent (has if/else to toggle on click) -> .child (has nothing)

<div class="parent">Parent
    <div class="child">Child</div>
</div>

父元素的样式可以隐藏溢出的内容并在点击时切换其高度。当用户单击时，父元素将展开以显示子元素。我希望用户能够单击子元素，而父元素不会切换回其原始大小并隐藏子元素。我希望切换只发生在父级上。

我意识到子元素仍然包含在父元素的可点击区域内，但是有没有办法排除它？

【问题讨论】：

停止传播！

标签： javascript html jquery dom jquery-events

【解决方案1】：

解决方案 1：将 target 与 currentTarget 进行比较：

$("#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');
    }
});

Fiddle

e.target 将是启动事件的元素。
e.currentTarget 将是它当前所在的位置（冒泡），在此单击事件中将是 parentEle，因为这就是它正在侦听的内容。

如果它们相同，您就知道点击是直接针对父级的。

解决方案 2：在事件到达 parentEle 之前停止传播：

另一个选项是在点击子元素时首先防止事件冒泡。可以这样做：

$("#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();
});

Fiddle

两者之间的主要区别在于，第一个解决方案将忽略此侦听器中的事件并让它继续冒泡。如果您有需要获取该事件的 parentEle 的父级，这可能是必要的。

第二个解决方案阻止任何点击事件冒泡过去parentEle 的直接子级。因此，如果 parentEle 的父级发生点击事件，他们也永远不会看到这些事件。

【讨论】：

+1 但性能明智，我建议您将 .find('*') 更改为 .children()。
@Karl-AndréGagnon 确实如此，因为我想我们不需要关心低于此值的冒泡。
效果很好。停止传播。

【解决方案2】：

使用event.stopPropagation();:

$('#a').add('#b').click(fun1);

function handler(event) {
    event.stopPropagation();
    // now do your stuff        
}

【讨论】：