javascript - 容器上具有单击处理程序的正常链接功能

Question

这个问题已经有答案了:

How to stop events bubbling in jQuery? [duplicate] (5 个回答)

已关闭 6 年前。

我有一个包含链接的 div，当我单击容器时，我有一些 AJAX 功能，但 div 中也有一个链接，我希望将其用作普通链接而不触发单击处理程序。

<div class="box">
    Lorem ipsum dolor sit amet...
    <a href="/actions/something/">Edit</a>
</div>

$('.box').on('click', function() {
    $.ajax({
        ...
    });
});

我将处理程序附加到容器中的所有其他文本，但如果我单击框背景，则不会触发处理程序。

Answer 1

您可以在 .box 事件处理程序中检测单击的元素，然后运行所需的任何逻辑:

$('.box').on('click', function(e) {
  if (e.target.tagName !== 'A') {
    $.ajax({
     // ...
    });
  }
});

或者，您可以在 a 元素上放置一个单独的事件处理程序，以阻止事件传播到 .box:

$('.box a').click(function(e) {
  e.stopPropagation();
});