13

结构：

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

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

父元素的样式被设计为隐藏溢出的内容并在单击时切换其高度。当用户单击时，父元素将展开以显示子元素。我希望用户能够在没有父元素切换回其原始大小并隐藏子元素的情况下单击子元素。我希望切换只发生在父母身上。

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

4

2 回答 2

27

解决方案 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，他们也永远不会看到这些事件。

于 2013-08-23T18:35:25.597 回答
3

使用event.stopPropagation();：

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

function handler(event) {
    event.stopPropagation();
    // now do your stuff        
}
于 2013-08-23T18:42:51.710 回答