jQuery stopPropagation 冒泡答案

【问题标题】：jQuery stopPropagation bubble downjQuery stopPropagation 冒泡
【发布时间】：2011-02-13 06:28:13
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery event-bubbling

【解决方案1】：

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

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

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

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

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

【讨论】：

尽管它会起作用，但我恭敬地不同意这个答案。正如我在回答中所说，您只需要检查 event.target 是其点击处理程序中的 <div> 元素（使用 if 语句）。无需向 <a> 元素添加另一个事件处理程序，它是额外的处理程序和不必要的额外工作。
是的，你可以在 div 事件处理程序中执行 if( $(event.target).is( "a" ) ) { /* code here */ }。这更像是对事件冒泡如何工作的解释。在某些情况下，向子级添加几个事件处理程序可能更容易或更有效，特别是如果有多种元素类型会使 if 条件更加复杂。我会把它包括在答案中。

【解决方案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。选择器在被调用时对监听器没有影响；它仅设置侦听器应注册到的元素列表。由于此列表在两个版本中都是相同的，因此没有区别。

【讨论】：