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上的内嵌点击也会触发。问题是li标签都是某些部分的一部分，它是通过不同页面上的ajax获取的。所以我使用jquery的delegate来绑定事件，如下所示：

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

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

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

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

所以要么完全创建unobtrusive（这是我强烈推荐的），要么在代码中删除内联点击处理程序。

示例：

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

Answer 2

你能试试吗？

$('#update-list').delegate('.popup-link', 'click', function(e){
    // e.target is <span> while e.currentTarget is .popup-link 
    e.stopPropagation();
    e.preventDefault(); // or return false

     // open popup in a timeout so that this function can return false
    window.setTimeout(function() {$.popup();}, 20);

    // for IE
    e.cancelBubble = true;
    return false;
});

Answer 3

 $('#update-list').delegate('.popup-link', 'click', function(e){       
  e.stopImmediatePropagation();
  e.preventDefault();
  // do something...
});

Answer 4

您可以尝试此操作，因为.delegate()方法已取代.on()。

它会正常工作

使用jquery delegate / live函数停止传播不起作用

4 个答案: