描述: 防止事件冒泡到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添加了單擊事件,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="http://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');
}
});