Question

我有一个带有链接的div：

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

单击<div />应该在某处，但点击子<a />应该访问www.lol.com。我从previous questions和jQuery website看到.stopPropagation可以阻止向上冒泡，但是如何防止气泡向下（这不是必要的？）。

Answer 1

事件只会冒泡。因此a元素的click事件处理程序在div的click事件处理程序之前触发。如果你想要你描述的行为，你需要将一个click事件处理程序添加到一个停止传播到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。选择器在调用时对侦听器没有影响;它只设置监听器应该注册的元素列表。由于此列表在两个版本中都相同，因此没有区别。

jQuery stopPropagation bubble down

2 个答案: