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：将目标与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的父级上有点击事件，他们就永远不会看到这些事件。

Answer 2

使用event.stopPropagation();：

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

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

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

2 个答案: