防止嵌套元素触发父元素的事件 [英] Prevent nested elements from triggering an event for parent element

问题描述

结构：

.parent（有if / else可以点击点击） - > .child（没有）

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

父元素被设计为隐藏溢出的内容并在点击上切换其高度。当用户单击时，父元素将展开以显示子元素。我希望用户能够单击子元素，而不需要父元素切换回其原始大小并隐藏子元素。我想要切换只发生在父母上。

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

解决方案

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

$ $ $ $ $ $$$$$$$$$ （'parent ele clicked'）;
} else {
//你可以排除这个其他块，使其在此监听器内不起作用
alert（'child ele clicked'）;
}
}）;

小提琴

e.target 将是启动该事件的元素。

e.currentTarget 将会在当前的位置（冒泡起来），这将是 parentEle

如果他们是一样的，你知道点击是直接在父母上。

---

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

另一个选项是防止事件冒泡起来，如果有一个点击子元素。可以这样做：

  $（＃parentEle）点击（function（e）{
 alert（'parent ele clicked'）; 
}）; 
 $（＃parentEle）。children（）。click（function（e）{
 //这样可以防止事件冒泡到任何高于直接孩子的事件
 e.stopPropagation （）; 
}）; 
  

小提琴

---

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

第二个解决方案停止任何点击事件冒泡通过 parentEle 的直接孩子。所以如果父母的点击事件是 parentEle ，他们永远也不会看到这些事件。

Structure:

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

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

The parent element is styled to hide overflowing content and toggle its height on click. When the user clicks, the parent element will expand to show the child element. I want users to be able to click on the child element without the parent element toggling back to its original size and hiding the child element. I want the toggle to only happen on the parent.

I realize the child element is still contained within the parent element's clickable area, but is there a way to exclude it?

解决方案

Solution 1: Compare target with 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 will be the element that started the event.
e.currentTarget will be where it currently is (bubbling up) which will be parentEle in this click event as that's what this is listening for.

If they are the same, you know the click was directly on the parent.

---

Solution 2: Stop the propagation before the event hits the parentEle:

The other option is to prevent the event from bubbling up in the first place if there is a click on a child element. That can be done like this:

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

---

The main difference between the two is that the first solution will just ignore the event in this listener and allow it to keep bubbling up. This may be necessary if you have a parent of this parentEle that needs to get the event.

The second solution stops any click events from bubbling past parentEle's direct children. So if there was a click event on a parent of parentEle, they would never see these events either.

这篇关于防止嵌套元素触发父元素的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！