如何使用stopPropogation()进行直播活动？

Question

HTML代码:

  <li id="list_id">List_text<img src='image.jpg' id="img_id"></li>

jQuery函数:

$("#list_id").live('click' , function(){
 alert('List is clicked');
});

$("#img_id").live('click' , function(){
 alert('Image is clicked');
});

一旦我点击图像,它的父li函数也会被触发.给我一个解决方案来解决这个问题.我需要触发img事件只有当我点击img元素并且当我点击li元素时需要触发li事件.

Answer 1

你需要.stopImmediatePropagation()在这里是安全的,因为事件处理程序是在同一水平(.live()事件处理生活在document默认情况下),就像这样:

$("#list_id").live('click' , function(){
 alert('List is clicked');
});

$("#img_id").live('click' , function(e){
 e.stopImmediatePropagation();
 alert('Image is clicked');
});

你可以在这里测试一下.

注意,如果您使用的是jQuery <1.4.3,则无法执行此操作,因为您还需要检查它是否已停止使用e.isImmediatePropagationStopped(),如下所示:

$("#list_id").live('click' , function(e){
 if(e.isImmediatePropagationStopped()) return;
 alert('List is clicked');
});

$("#img_id").live('click' , function(e){
 e.stopImmediatePropagation();
 alert('Image is clicked');
});