jQuery stopPropagation 阻止事件冒泡向下传递

Question

我有一个包含链接的div：

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

单击 <div /> 应该跳转到某个地方，但是单击子元素 <a /> 应该跳转到 www.lol.com。我从 之前的问题 和 jQuery 网站 上看到，.stopPropagation 可以阻止冒泡向上，但是如何阻止冒泡向下（这不是此处所需的吗？）。

- atp

Answer 1

事件只会向上冒泡。因此，对于a元素的点击事件处理程序将在对div的点击事件处理程序之前触发。如果您想要所描述的行为，则需要为元素添加一个点击事件处理程序，以停止事件传播到

。

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

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

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

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

- Geoff

---

尽管它可以工作，但我尊重地不同意这个答案。正如我在我的答案中所说的那样，你只需要在点击处理程序中检查event.target是否是<div>元素（使用一个if语句）即可。没有必要向<a>元素添加另一个事件处理程序，这是不必要的额外处理程序和额外工作。 - Andy E

是的，您可以在div事件处理程序中使用if($(event.target).is("a")){/在此处编写代码/}。这更多是对事件冒泡工作原理的解释。有时，如果存在多个元素类型，使if条件更加复杂，向子元素添加一些事件处理程序可能会更容易或更有效。我将在答案中包含它。 - Geoff

Answer 2

问题在于点击锚点仍然会在您的

中触发一次点击。这被称为“事件冒泡”。

实际上，有多种解决方案：

1. 在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 和 ID 为 #ancherComplaint 的元素。

我猜你想要阻止锚点的事件。但这种方式行不通，因为你和我的选择器都选中了同一个 DIV 元素。在调用监听器时，选择器不会产生影响；它只设置应注册监听器的元素列表。由于这个列表在两个版本中是相同的，所以不存在差异。

- Vijay