通过事件冒泡在 Anchor 内跨度

发布于 2024-07-23 04:59:39 字数 998 浏览 4 评论 0原文

我有这样的一段 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 元素引发单击事件？毕竟，除了上一个问题之外，我没有将单击事件绑定到 SPAN 元素
，我认为如果我不处理 SPAN 单击事件，浏览器将使用事件冒泡来引发锚点的单击事件（如果我不调用event.stopPropagation())。但我也没有解决我的问题，因为点击事件只引发一次

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

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

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

谢谢，

Paweł

原文

I have such a piece of html:

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

To handle AJAX request when clicking on anchor I have registered handler on click event:

    $('.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();
});

My questions are:

why click event is raised for span element? After all, I didn't bind click event to SPAN elements
apart from previous question, I thought that if I won't handle SPAN click event, browser will use event-bubbling to raise click event for anchor (if I won't call event.stopPropagation()). But I also didn't work out for me as that click event is raised only once

So now, I got round that problem I my solution is:

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

But still, I'm curious why it works like this...

Thanks,

Paweł

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

走过海棠暮 2024-07-30 04:59:39

您必须使用事件的 currentTarget。

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

You have to use the currentTarget of your event.

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

回复收藏 0 原文

×纯※雪 2024-07-30 04:59:39

好的，但是如果我单击 SPAN 并调用 stopPropagation() 方法，那么该形式的代码将无法工作：

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

});

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

Ok, but if I click on SPAN and call stopPropagation() method my code in that form won't work:

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

});

Still, I thing I'm missing some crucial points related with event bubbling.

回复收藏 0 原文