如何防止在单击子锚点时触发父级的 onclick 事件？

javascript jquery event-propagation

2022-08-29 23:13:12

我目前正在使用jQuery使div可点击，在这个div中我也有锚点。我遇到的问题是，当我单击锚点时，两个单击事件都会触发（对于div和锚点）。如何防止在单击锚点时触发 div 的 onclick 事件？

这是损坏的代码：

JavaScript

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

断续器

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.example">I don't want #clickable to handle this click event.</a>
</div>

答案 1

事件会冒泡到 DOM 中附加了单击事件的最高点。因此，在您的示例中，即使您在 div 中没有任何其他可显式单击的元素，div 的每个子元素也会在 DOM 上冒泡其单击事件，直到 DIV 的单击事件处理程序捕获它。

有两种解决方案是检查谁实际发起了该事件。jQuery 将 eventargs 对象与事件一起传递：

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

您还可以将单击事件处理程序附加到链接，告诉它们在自己的处理程序执行后停止事件冒泡：

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

答案 2

使用停止传播方法，请参阅示例：

$("#clickable a").click(function(e) {
   e.stopPropagation();
});

正如jQuery Docs所说：

stopPropagation方法可防止事件冒泡 DOM 树，从而防止任何父处理程序收到有关该事件的通知。

请记住，它不会阻止其他侦听器处理此事件（例如，一个按钮的多个单击处理程序），如果它不是所需的效果，则必须改用。stopImmediatePropagation