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

结构：

.parent（点击时有if/else切换）->.child（没有）

Parent
小孩

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

---

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

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

$("#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：在事件到达父对象之前停止传播ele:

$("#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');
    }
});

另一个选项是，如果单击子元素，则首先防止事件冒泡。可以这样做：

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

的父级上有一个单击事件，他们也不会看到这些事件。

使用

event.stopPropagation（）：

停止传播+1但就性能而言，我建议您将
.find（'*'）
更改为
.children（）
@Karl AndréGagnon足够正确，因为我认为我们不需要关心下面的冒泡。效果很好。停止传播。
$('#a').add('#b').click(fun1);

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