1

我试图在 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 中包含 ap，但为了简单起见，让我们暂时忽略它。我怎样才能让内部元素 slideUp() 没有父级点击甚至触发它到 slideDown() 之后立即？

4

3 回答 3

4

return false停止冒泡：

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

请注意，返回 false 也会阻止事件的默认行为。 在这里阅读更多。

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

jQuery('.contained').click(function(e) {                 
    Query(this).slideUp();
    e.stopPropagation();
});
于 2013-01-21T22:32:24.143 回答
0

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

于 2013-01-21T22:34:12.217 回答
0

有两种方法，停止传播或结合两个点击处理程序并根据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();
    }   
});
于 2013-01-21T22:37:16.563 回答