Question

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

但是，我很好奇为什么它会像这样......

谢谢，

帕维尔

Answer 1

您必须使用事件的currentTarget。

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

Answer 2

好的，但如果我点击SPAN并调用stopPropagation（）方法，那么我在该表单中的代码将无效：

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

}）;

尽管如此，我还是遗漏了一些与事件冒泡有关的关键点。

Answer 3

您随时可以阅读specification。还有一个很好的教程here。

如果您为SPAN和A元素定义了单击事件处理程序，则StopPropagation仅具有意义。在SPAN事件处理程序中调用stopPropagation将阻止调用A处理程序。这假定为默认的泡沫阶段。

跨越Anchor，事件冒泡

3 个答案: