jquery - jQuery stopPropagation 冒泡

Question

我有一个 div 里面有一个链接：

<div id="myDiv">
    <a href="http://www.lol.com">Lol</a>
</div>

点击<div />应该去某个地方，但点击孩子<a />应该去 www.lol.com。我从之前的问题和jQuery 网站中看到 .stopPropagation 可以防止向上冒泡，但是如何防止向下冒泡（这不是这里的必要条件吗？）。

Answer 1

事件只会冒泡。因此，a元素的 click 事件处理程序在div. 如果您想要您描述的行为，您需要向 a 元素添加一个单击事件处理程序，以停止传播到 div。

$("#myDiv a").click( function(event) {
    event.stopPropagation();
} );

并保留您在 div 上的任何事件处理程序。这应该允许事件执行它的默认操作，并防止 div 上的处理程序被触发。

如果您只想阻止点击链接，那么您可以更改div元素的事件处理程序

$("#myDiv").click( function( event ) {
    if( !$( event.target ).is( "a" ) )
    {
        // existing event handler
    }
} );

Answer 2

问题是单击锚点仍会触发您的<div>. 这就是所谓的“事件冒泡”。

其实有多种解决方案：

检查 DIV 单击事件处理程序是否实际目标元素是锚 → jsFiddle

$('#myDiv').click(function (evt) {
    if (evt.target.tagName != "A") {
        alert('123');
    }

    // Also possible if conditions:
    // - evt.target.id != "ancherComplaint"
    // - !$(evt.target).is("#ancherComplaint")
});

$("#ancherComplaint").click(function () {
    alert($(this).attr("id"));
});

从锚点单击侦听器停止事件传播→ jsFiddle

$("#ancherComplaint").click(function (evt) {
    evt.stopPropagation();
    alert($(this).attr("id"));
});

您可能已经注意到，我从示例中删除了以下选择器部分：

:not(#ancherComplaint)

这是不必要的，因为没有 .expandable-panel-heading 类的元素也具有#ancherComplaint其 ID。

我假设您想抑制锚点的事件。这不能以这种方式工作，因为两个选择器（你的和我的）都选择完全相同的 DIV。选择器在被调用时对监听器没有影响；它仅设置侦听器应注册到的元素列表。由于此列表在两个版本中相同，因此没有区别。