DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> Jquery阻止事件冒泡 event.stopPropagation
Jquery阻止事件冒泡 event.stopPropagation
編輯:JQuery特效代碼     
描述: 防止事件冒泡到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');
}
});
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved