jquery - 如何使用 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');
});

You can test it here .

---

请注意，如果您使用的是 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');
});