容器上带有单击处理程序的正常链接功能[重复]

【问题标题】：Normal link functionality with click handler on container [duplicate]容器上带有单击处理程序的正常链接功能[重复]
【发布时间】：2017-05-16 09:02:41
【问题描述】：

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

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

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

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

【问题讨论】：

为锚附加另一个事件处理程序并使用event.stopPropagation()

标签： javascript jquery onclick

【解决方案1】：

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

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

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

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

【讨论】：

太好了，谢谢。 event.StopPropogation 在 a 上工作