javascript - 停止传播 jQuery 委托(delegate)/实时函数不起作用

Question

这是问题 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>

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

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

这似乎不起作用，内联 onclick 无论如何都会触发。我也尝试过使用 live() 但没有成功。我在这里缺少什么吗？

Answer 1

据我所知，您无法通过停止附加事件处理程序 中的冒泡来可靠地阻止内联事件处理程序 触发。

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

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

因此，要么创建它完全不显眼(这是我强烈推荐的)，要么在代码中删除内联点击处理程序。

示例:

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

引用:.delegate()