使用事件冒泡跨越 Anchor

Posted 2023-05-07

【中文标题】使用事件冒泡跨越 Anchor

【英文标题】：Span inside Anchor with event bubbling

【发布时间】：2010-10-29 12:13:34

【问题描述】：

我有这么一段html：

<li class="addToFriends"><a href="....">Something something<span>INSIDE SPAN</span>something</a></li>

为了在点击锚点时处理 AJAX 请求，我已经在点击事件上注册了处理程序：

    $('.addToFriends a').click(function(event)
    var target = $(event.target);
    if (target.is('a')) 
              // if I click on SPAN element following fragment won't execute!


      // do ajax request
           
    event.preventDefault();
);

我的问题是：

为什么会为 span 元素引发 click 事件？毕竟我没有将点击事件绑定到 SPAN 元素 除了上一个问题，我认为如果我不处理 SPAN 点击事件，浏览器将使用事件冒泡来为锚点引发点击事件（如果我不调用 event.stopPropagation()）。但我也没有为我工作，因为该点击事件只引发了一次

所以现在，我解决了这个问题，我的解决方案是：

    $('.addToFriends a').click(function(event)
    var target = $(event.target);
    if (!target.is('a')) 
      target = target.parent('a')
     
            ...
);

但是，我还是很好奇它为什么会这样工作......

谢谢，

帕维尔

【问题讨论】：

谢谢，我会仔细研究一下规范和文章。无论如何，你可以回答这个问题： > 为什么会为 span > 元素引发点击事件？毕竟，我没有将 > click 事件绑定到 SPAN 元素，因为这对我来说主要是个问题。

非常感谢您的帮助。研究提到的文章后，一切都一清二楚。而不是指 e.target （它可以改变）我指的是 this （它总是锚）。

【参考方案1】：

您必须使用活动的 currentTarget。

$('.addToFriends a').click(function(event)
     event.currentTarget;    
     ...
);

【讨论】：

如果我更仔细地阅读了该答案，我会注意到您建议使用 currentTarget 而不是 target。这本身就是解决方案。我多么笨拙:)

【参考方案2】：

好的，但是如果我点击 SPAN 并调用 stopPropagation() 方法，我的代码将无法工作：

$('.addToFriends a').click(function(event)
    var target = $(event.target);
    if (target.is('a')) 
       // do ajax request
       event.stopPropagation();               
       event.preventDefault();
    

);

不过，我还是遗漏了一些与事件冒泡相关的关键点。

【参考方案3】：

您可以随时阅读specification。一个不错的教程也可用here。

StopPropagation 仅在您为 SPAN 和 A 元素都定义了单击事件处理程序时才有意义。在 SPAN 事件处理程序中调用 stopPropagation 将阻止调用 A 处理程序。这假定了默认的冒泡阶段。