javascript - 防止嵌套元素触发父元素的事件

Question

结构:

.parent(有 if/else 可以在点击时切换)-> .child(什么都没有)

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

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

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

Answer 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 的父级上有点击事件，他们也永远不会看到这些事件。