仅在 jQuery 中触发最内层元素的单击事件答案

【问题标题】：Fire click event for only innermost element in jQuery仅在 jQuery 中触发最内层元素的单击事件
【发布时间】：2013-01-21 22:30:16
【问题描述】：

我试图在 HTML 树的最里面的元素上触发一个点击事件，但是由于有一个点击甚至与它的父容器相关联，所以这两个事件都会被触发，这不是我需要的。我之前用 stopPropagation() 解决了这个问题，但我今天似乎无法让它工作。

jQuery('#parent li').click(function() {
    jQuery(this).children('.contained').slideDown();
});
jQuery('.contained').click(function() {                 
    Query(this).slideUp();
});

假设这是我们的 HTML：

<ul id="parent">
    <li>
        click to show more
        <p class="contained">click to hide</p>
    </li>
</ul>

我相信这不会验证，因为它在 li 中包含一个 p，但为了简单起见，我们暂时忽略它。我怎样才能让内部元素 slideUp() 没有父点击甚至触发它后立即 slideDown() ？

【问题讨论】：

Query 应该是 jQuery 我相信。可能你在复制代码时错过了它，但还是注意到了这一点。

标签： javascript jquery events click propagation

【解决方案1】：

return false 停止冒泡：

jQuery('.contained').click(function() {                 
    Query(this).slideUp();
    return false;
});

请注意，返回 false 也会阻止事件的默认行为。 Read more here.

或者使用事件对象的stopPropagation函数：

jQuery('.contained').click(function(e) {                 
    Query(this).slideUp();
    e.stopPropagation();
});

【讨论】：

第二种方法是我通常这样做的方式，但我得到的错误是对象没有 stopPropagation()。另一方面，返回 false 效果很好。
@RussellStrauss，关于stopPropagation，您很可能有错字，或者您忘记在“函数声明”中声明事件对象
这似乎不适用于动态创建的 div。不知道该怎么办。

【解决方案2】：

答案是停止事件的传播。您可以使用stopPropagation 及其孪生stopImmediatePropagation 来执行此操作，或者您可以通过从处理程序返回false 来停止传播并阻止默认操作。 stopPropagation 方法将防止事件冒泡，即事件沿 DOM 树向上传播。 stopImmdiatePropagation 会做到这一点，但也会阻止同一级别的其他处理程序触发。返回 false 相当于在事件上使用stopPropagation 和preventDefault。

【讨论】：

【解决方案3】：

两种方法，停止传播或结合两个点击处理程序并根据event.target调整代码

目标方法：

jQuery('#parent li').click(function(event) {
     var $tgt=jQuery(event.target)
    if (!$tgt.is('.contained') ){
         jQuery(this).children('.contained').slideDown();
    }else{
       $tgt.slideUp();
    }   
});

【讨论】：