javascript - 仅触发 jQuery 中最内层元素的点击事件

Question

我试图在 HTML 树中最内层的元素上触发点击事件，但由于点击甚至绑定(bind)到其父容器，所以两个事件都被触发，这不是我需要的。我之前用 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()？

Answer 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();
});