当处理程序已经存在并绑定时，jQuery stopPropagation on .live（）

我知道现场电话会在整个文件中冒出来，这就是我遇到问题的原因。

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

使用.click（）结合eventStopPropogation工作得很好，但是由于我需要使用live，on，delegate等内容的动态特性……这是我的问题的一个小问题。 单击“内部”div时，我需要阻止“外部”点击。 我不能改变“外部”处理程序。

在此先感谢您的帮助！！

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

HTML：

 outer 
 inner 
  

使用Javascript：

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

Answer 1

使用绑定到outer委托并在inner单击处理程序中调用e.stopPropagation() 。这应该是技巧。

试试这个更新

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

这里更新了小提琴

Answer 2

正如您已经注意到的那样，事件委托取决于事件冒泡和静态元素的使用。 问题很复杂，因为

和

元素之间没有任何内容，但我们可以解决这个问题。

为绑定到#outer的#inner元素设置click事件的动态事件处理程序，并调用event.stopImmediatePropagation()以防止执行其他事件处理程序。 缺点是这取决于事件处理程序绑定的顺序，因此#inner委托事件处理程序必须在#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"); });