9

我有这样一段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')
    } 
            ...
});

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

谢谢，

帕维尔

4

3 回答 3

12

您必须使用活动的 currentTarget。

$('.addToFriends a').click(function(event){
     event.currentTarget;    
     ...
});
于 2009-05-28T07:38:44.060 回答
1

好的，但是如果我单击 SPAN 并调用 stopPropagation() 方法，我的该表单中的代码将不起作用：

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

});

尽管如此，我还是错过了一些与事件冒泡相关的关键点。

于 2009-05-28T07:43:52.910 回答
1

您可以随时阅读规范。这里也提供了一个不错的教程。

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

于 2009-05-28T07:54:21.110 回答