jQuery stopPropagation 气泡向下

Question

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

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

单击

应该转到某处，但单击子 应该转到www.lol.com。我从之前的问题和jQuery 网站 .stopPropagation 可以防止向上冒泡，但是如何防止向下冒泡（这不是这里所必需的吗？）。

Answer 1

事件只会冒泡。因此，a 元素的单击事件处理程序在 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 单击事件处理程序中检查实际目标元素是否是锚点
→ 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。选择器被调用时对监听器没有影响；它仅设置侦听器应注册到的元素列表。由于这个列表在两个版本中都是相同的，因此不存在差异。