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

Question

结构体:

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

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

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

我意识到子元素仍然包含在父元素的可点击区域中,但有没有办法将其排除？

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');
    }
});

小提琴

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

小提琴

两者之间的主要区别在于,第一个解决方案将忽略此侦听器中的事件并允许它继续冒泡.如果您的父母parentEle需要获取该事件,则可能需要这样做.

第二个解决方案阻止任何点击事件冒泡过去parentEle的直接孩子.因此,如果父项上有点击事件parentEle,他们也永远不会看到这些事件.