jQuery event.stopPropagation() 方法详解：阻止事件冒泡

event.stopPropagation() 方法概述

描述：防止事件向DOM树上层传播，即不触发任何祖先元素上的事件处理函数。

version added: 1.0

event.stopPropagation()

我们可以使用 event.isPropagationStopped() 来检查该方法是否已在当前事件对象上被调用。

此方法对通过 trigger() 触发的自定义事件同样有效。

需要注意的是，这并不会阻止同一元素上绑定的其他事件处理函数的执行。

Additional Notes:

自 .live() 方法处理事件机制而言，一旦事件传播至文档顶层，live 事件无法停止传播。同理，.delegate() 绑定的事件始终会传播至被委托的元素；当委托事件被触发时，该元素上的事件才会执行。

阻止事件冒泡示例

Example:

阻止 click 事件的冒泡。

 
$("p").click(function(event){
event.stopPropagation();
// do something
}); 

实现并不复杂，主要目的是记录如何阻止事件冒泡。

由于 div 元素绑定了单击事件，且其内部的 img 元素也绑定了单击事件，因此当点击 img 时，会先触发 img 上的单击事件，随后触发 div 上的单击事件，这种现象称为事件冒泡。

在 jQuery 中，我们可以轻松阻止这种冒泡行为。

如下所示

event.stopPropagation();

这样，点击 img 时便不再触发 div 的单击事件。

 
$('div').click(function(){
var $div = $(this);
if($div.find('img').size() > 0){
return;
}else{
$div.css('backgroundColor','#e1f0f3');
$('<img src="https://www.jb51.net/lovejjhao/341157/o_cha.jpg"/>').
appendTo($(this)).click(function(event){
$div.css('backgroundColor','#ffffff');
$(this).remove();
event.stopPropagation();
}).css('margin-left','10px');
} 
});