jquery事件冒泡

標籤：

一、什麼是冒泡事件

事件發生後，瀏覽器通常首先觸發事件發生元素上的事件處理常式，然後是它的父元素，父元素的父元素……依此類推， 直到文檔的根項目為止。

這被稱為事件冒泡，是事件傳播的最常見的方式。當處理好一個事件後， 你可能想要停止事件的傳播，不希望它繼續冒泡。就要綁定該事件的處理方法。

如，給他們都設定一個點擊事件，當點擊button時即觸發button的點擊事件時則會觸發相應的父元素div發生點擊事件，再觸發body發生觸發事件，以此類推直至document或是window為止。

二、冒泡舉例說明

程式：

效果：

當點擊three所在的紅色盒子的時候，出現彈框three，確定之後又出現彈框two再出現彈框one。

當點擊two所在的黃色盒子的時候，出現彈框two，再出現彈框one。

當點擊one所在的綠色盒子的時候，只出現彈框one。

即前兩種情況都發生了冒泡。

如果有人說是書寫的click事件的先後順序導致的，但是並不是，都是當文檔載入結束後執行的。

阻止冒泡的方法：

若想在點擊two之後阻止後面繼續的冒泡，則添加以下即可

則之後出現彈框two不再出現彈框one。

三、jquery阻止事件起泡執行個體

1、通過返回false來取消預設的行為並阻止事件起泡。

jQuery 代碼:

$("form").bind(

　　"submit", 

　　function() { 

　　　　return false;

　　 }

);

2、通過使用 preventDefault() 方法只取消預設的行為。

jQuery 代碼:

$("form").bind(

　　"submit", 

　　function(event){
　　　　event.preventDefault();
　　}

);

3、通過使用 stopPropagation() 方法只阻止一個事件起泡。

jQuery 代碼:

$("form").bind(

　　"submit", 

　　function(event){
　　　　event.stopPropagation();
　　}

);

四、相關網址

http://www.cnblogs.com/secying/archive/2012/03/22/2411493.html

http://blog.163.com/chtx87_98/blog/static/654011192011830928585/

http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.html

jquery事件冒泡