jquery - 当处理程序已经存在并绑定时，.live() 上的 JQuery stopPropagation

Question

我知道现场电话会通过文档冒泡，这就是我遇到问题的原因。

不幸的是，我正在使用绑定元素的第三方库，并希望创建一个点击事件不会冒泡到这些元素的案例。

将 .click() 与 eventStopPropogation 结合使用效果很好，但是由于内容的动态特性，我需要使用 live、on、delegate 等...这是我的问题的一个小问题。单击“内部” div 时，我需要防止触发“外部”单击。我无法更改“外部”处理程序。

在此先感谢您的帮助！！

http://jsfiddle.net/99zQM/2/

HTML：

<div id="outer">
    outer
    <div id="inner">
        inner
    </div>
</div>

Javascript：

$("#outer").bind('click',function(e){
   alert("outer clicked"); 
});

$("#inner").live('click',function(e){
   alert("inner clicked"); 
});

Answer 1

使用on绑定到outer并调用单击处理程序e.stopPropagation()的委托。这应该可以解决问题。inner

试试这个 更新

$("#outer").bind('click',function(e){
  alert("outer clicked"); 
});

$('#outer').on('click',"#inner",function(e){
  e.stopPropagation();
  alert("inner clicked"); 

});

在这里更新小提琴

Answer 2

正如您已经说过的，事件委托取决于事件冒泡和静态元素的使用。这个问题很复杂，因为<div id="inner">和<div id="outer">元素之间没有任何东西，但我们可以解决这个问题。

click为绑定到的#inner元素上的事件设置动态事件处理程序#outer，并调用event.stopImmediatePropagation()以防止执行其他事件处理程序。缺点是这取决于绑定事件处理程序的顺序，因此您的委托事件处理程序#inner必须在静态事件处理程序之前绑定#outer。

$('#outer').on('click', '#inner', function(e) {
    console.log('inner');
    e.stopImmediatePropagation();
}).click(function(e) {
    console.log('outer');  
});

看看这个 jsFiddle 演示。

Answer 3

你可以使用

$("#outer").bind('click',function(e){
   alert("outer clicked"); 
});
$('#outer').on('click',"#inner",function(e){
    e.stopImmediatePropagation();
    alert("inner clicked"); 

});