使用 jQuery 委托/实时功能停止传播不起作用 [英] Stop propagation with jQuery delegate/live function not working

问题描述

这是html的问题:

<li class="update";onclick="window.location('some_url')"><h2>一些标题 </h2><p>一些段落</p><div><a class="popup-link"><跨度>显示弹出窗口 </span><跨度>+ </span></a>

//重复n次//...

当我点击 .popup-link 链接时，它应该只打开灯箱弹出窗口(它会打开)但是 li 上的内联 onclick 也会触发.问题是 li 标签都是一些部分的一部分，这些部分是通过不同页面上的 ajax 获取的.所以我使用jQuery的delegate来绑定事件如下:

$('#update-list').delegate('.popup-link', 'click', function(e){//e.target 是 <span>而 e.currentTarget 是 .popup-linke.stopPropagation();//console.log(e.isPropagationStopped());这在控制台中显示真"$.popup();//启动弹出窗口e.preventDefault();//或返回假});

这似乎不起作用，内联 onclick 无论如何都会触发.我也尝试过 live() ，但没有成功.有什么我在这里遗漏的吗?

解决方案

AFAIK 你不能通过阻止 附加事件处理程序中的冒泡来可靠地阻止 内联事件处理程序触发>.

此外，使用 live() 或 .delegate() 不能使用 preventDefault() 或 stopPropagation()代码>.您需要返回 false 以防止冒泡阶段和默认行为.

无论如何，正如我已经提到的，您无法阻止内联事件处理程序触发.

因此，要么完全unobtrusive(这是我强烈推荐的)，要么删除代码中的内联点击处理程序.

示例:

$('#update-list').delegate('.popup-link', 'click', function(e){$.popup();//启动弹出窗口返回假；}).delegate('.update', 'click', function(){window.location('some_url');})//如果您可以省略 onclick 属性，则其余部分是不必要的.find('.update').removeAttr('onclick');

参考:.delegate()

Here's the problem html:

<ul id="update-list">
<li class="update" onclick="window.location('some_url')">
  <h2> some header </h2>
  <p> some paragraph </p>
  <div>
    <a class="popup-link">
      <span> Show Popup </span>
      <span> + </span>
    </a>
  </div>
</li> 
// this repeats n times
//...
</ul>

When I click on .popup-link link, it should open the lightbox popup only (which it does) but the inline onclick on li also fires. The thing is that the li tags are all part of some partial which is fetched via ajax on different pages. So I use jQuery's delegate to bind the events as follows:

$('#update-list').delegate('.popup-link', 'click', function(e){
    // e.target is <span> while e.currentTarget is .popup-link 
    e.stopPropagation();
    //console.log(e.isPropagationStopped());  this shows 'true' in console
    $.popup();   // launch popup
    e.preventDefault(); // or return false
});

This doesn't seem to work and the inline onclick fires anyway. I've tried with live() as well but no success. Is there something I am missing here?

解决方案

AFAIK you cannot reliably prevent an inline event handler from firing by stopping the bubbling within an attached event handler.

Furthermore, using live() or .delegate() you cannot use preventDefault() nor stopPropagation(). You need to return false to prevent the bubble phase and the default behavior.

Anyway, as I already mention you can't prevent the inline event handler to fire with that.

So either, create it completely unobtrusive (which is what I highly recommend) or remove that inline click handler in code.

Example:

$('#update-list').delegate('.popup-link', 'click', function(e){       
   $.popup();   // launch popup
   return false;
}).delegate('.update', 'click', function(){
   window.location('some_url');
})
// the rest of this is unnecessary if you can just omit the onclick attribute 
.find('.update')
  .removeAttr('onclick'); 

Ref.: .delegate()

这篇关于使用 jQuery 委托/实时功能停止传播不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！