冒泡事件就是，事件發(fā)生后，瀏覽器通常首先觸發(fā)事件發(fā)生元素上的事件處理程序，然后是它的父元素，父元素的父元素……依此類(lèi)推， 直到文檔的根元素為止。冒泡事件是事件傳播的最常見(jiàn)的方式；當(dāng)處理好一個(gè)事件后，如果想要停止事件的傳播，不希望它繼續(xù)冒泡，就要綁定該事件的處理方法。

前端（vue）入門(mén)到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6.1版本、Dell G3電腦。

什么是事件冒泡

冒泡事件就是，如果在某一個(gè)對(duì)象上觸發(fā)某一類(lèi)事件，那么該事件會(huì)向父級(jí)傳播，并觸發(fā)父對(duì)象上定義的同類(lèi)事件。事件傳播的方向是從最底層到最頂層，類(lèi)似于水泡從水底浮上來(lái)一般。

一個(gè)HTML文檔可以可視化一個(gè)DOM樹(shù)：

那么事件冒泡現(xiàn)象就可以形象的表示為下圖:

簡(jiǎn)單來(lái)說(shuō)：

事件發(fā)生后，瀏覽器通常首先觸發(fā)事件發(fā)生元素上的事件處理程序，然后是它的父元素，父元素的父元素……依此類(lèi)推， 直到文檔的根元素為止。

這被稱為事件冒泡，是事件傳播的最常見(jiàn)的方式。當(dāng)處理好一個(gè)事件后， 你可能想要停止事件的傳播，不希望它繼續(xù)冒泡。就要綁定該事件的處理方法。

如上圖，給他們都設(shè)置一個(gè)點(diǎn)擊事件，當(dāng)點(diǎn)擊button時(shí)即觸發(fā)button的點(diǎn)擊事件時(shí)則會(huì)觸發(fā)相應(yīng)的父元素div發(fā)生點(diǎn)擊事件，再觸發(fā)body發(fā)生觸發(fā)事件，以此類(lèi)推直至document或是window為止。

冒泡舉例說(shuō)明

程序：

效果：

當(dāng)點(diǎn)擊three所在的紅色盒子的時(shí)候，出現(xiàn)彈框three，確定之后又出現(xiàn)彈框two再出現(xiàn)彈框one。

當(dāng)點(diǎn)擊two所在的黃色盒子的時(shí)候，出現(xiàn)彈框two，再出現(xiàn)彈框one。

當(dāng)點(diǎn)擊one所在的綠色盒子的時(shí)候，只出現(xiàn)彈框one。

即前兩種情況都發(fā)生了冒泡。

如果有人說(shuō)是書(shū)寫(xiě)的click事件的先后順序?qū)е碌?，但是并不是，都是?dāng)文檔加載結(jié)束后執(zhí)行的。

阻止冒泡的方法：

若想在點(diǎn)擊two之后阻止后面繼續(xù)的冒泡，則添加以下即可

則之后出現(xiàn)彈框two不再出現(xiàn)彈框one。

jquery阻止事件起泡實(shí)例

1、通過(guò)返回false來(lái)取消默認(rèn)的行為并阻止事件起泡。

jQuery 代碼:

$("form").bind( 　　"submit",  　　function() {  　　　　return false; 　　 } );

2、通過(guò)使用 preventDefault() 方法只取消默認(rèn)的行為。

jQuery 代碼:

$("form").bind( 　　"submit",  　　function(event){ 　　　　　　event.preventDefault();　　 　　} );

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

jQuery 代碼:

$("form").bind( 　　"submit",  　　function(event){ 　　　　　　event.stopPropagation();　　 　　} );

【推薦學(xué)習(xí)：jQuery視頻教程、web前端視頻】