如何理解jquery事件冒泡

事件冒泡（IE提出）：

10余年的鼓樓網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。網(wǎng)絡營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調整鼓樓建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“鼓樓網(wǎng)站設計”,“鼓樓網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

從最具體的元素接收，然后逐級向上傳播到較為不具體的節(jié)點

事件捕獲：

從較為不具體的節(jié)點接收，然后逐級向下到最具體的元素。

PS：假設有一個文檔，節(jié)點為 html→body→div→button 。

事件冒泡的傳播順序是：button→div→body→html→document→window，

事件捕獲的傳播順序是：window→document→html→body→div→button。

具體是不是這樣我忘了，反正兩個是相反的。

舉個例子：

事件冒泡：

!DOCTYPE?html

html

head

meta?charset="utf-8"

script

function?body_click()?{

alert('Body被點擊了')

}

function?div_click()?{

alert('Div被點擊了')

}

function?button_click()?{

alert('Button被點擊了')

}

/script

/head

body?onclick="body_click()"

div?onclick="div_click()"

button?onclick="button_click()"事件冒泡/button

/div

/body

/html

點擊之后會依次彈窗（注意順序）：Button被點擊了、Div被點擊了、Body被點擊了。（從具體的節(jié)點傳播至最不具體的節(jié)點）

然后是事件捕獲：

!DOCTYPE?html

html

head

meta?charset="utf-8"

script

window.onload?=?function()?{

document.getElementById('btn').addEventListener('click',function?(e)?{

alert('Button被點擊了')

},true);

document.getElementById('div').addEventListener('click',function?(e)?{

alert('Div被點擊了')

},true);

document.getElementById('body').addEventListener('click',function(e)?{

alert('Body被點擊了')

},true);

}

/script

/head

body?id="body"

div?id="div"

button?id="btn"事件捕獲/button

/div

/body

/html

點擊之后會依次彈窗（注意順序）：Body被點擊了、Div被點擊了、Button被點擊了。（從不具體的節(jié)點傳播至最具體的節(jié)點）

jquery怎么寫事件冒泡

事件冒泡不需要寫，瀏覽器就是這樣的機制，只是要學會利用

什么是JS事件冒泡？

在一個對象上觸發(fā)某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。

如何來阻止Jquery事件冒泡？

通過一個小例子來解釋

復制代碼代碼如下:

%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default5.aspx.cs"Inherits="Default5"%

!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""

htmlxmlns=""

headrunat="server"

titlePorschev---Jquery事件冒泡/title

scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"/script

/head

body

formid="form1"runat="server"

divid="divOne"onclick="alert('我是最外層');"

divid="divTwo"onclick="alert('我是中間層！')"

aid="hr_three"href=""mce_href=""onclick="alert('我是最里層！')"點擊我/a

/div

/div

/form

/body

/html

比如上面這個頁面，

分為三層：divOne是第外層，divTwo中間層，hr_three是最里層;

他們都有各自的click事件，最里層a標簽還有href屬性。

運行頁面，點擊“點擊我”,會依次彈出：我是最里層----我是中間層----我是最外層----然后再鏈接到百度.

這就是事件冒泡，本來我只點擊ID為hr_three的標簽，但是確執(zhí)行了三個alert操作。

事件冒泡過程（以標簽ID表示）：hr_three----divTwo----divOne。從最里層冒泡到最外層。

如何來阻止?

1.event.stopPropagation();

復制代碼代碼如下:

scripttype="text/javascript"

$(function(){

$("#hr_three").click(function(event){

event.stopPropagation();

});

});

script

再點擊“點擊我”，會彈出：我是最里層，然后鏈接到百度

2.returnfalse;

如果頭部加入的是以下代碼

復制代碼代碼如下:

scripttype="text/javascript"

$(function(){

$("#hr_three").click(function(event){

returnfalse;

});

});

script

再點擊“點擊我”，會彈出：我是最里層，但不會執(zhí)行鏈接到百度頁面

由此可以看出：

1.event.stopPropagation();

事件處理過程中，阻止了事件冒泡，但不會阻擊默認行為（它就執(zhí)行了超鏈接的跳轉）

2.returnfalse;

事件處理過程中，阻止了事件冒泡，也阻止了默認行為（比如剛才它就沒有執(zhí)行超鏈接的跳轉）

還有一種有冒泡有關的：

3.event.preventDefault();

如果把它放在頭部A標簽的click事件中，點擊“點擊我”。

會發(fā)現(xiàn)它依次彈出：我是最里層----我是中間層----我是最外層，但最后卻沒有跳轉到百度

它的作用是：事件處理過程中，不阻擊事件冒泡，但阻擊默認行為（它只執(zhí)行所有彈框，卻沒有執(zhí)行超鏈接跳轉）

jquery 事件使用冒泡問題

同學你這個應該不是冒泡導致的!所謂的冒泡是這樣的:假如body包含div,div包含span.

同時這3個元素上都綁定了click事件!這個時候如果你點擊span的時候就會依次觸發(fā):

spandivbody的click事件!

如果你想點擊span的時候div和body的click事件不被觸發(fā)!只需要在span的click事件中加上

return

false;即可

你這個我沒有試過!但是我感覺在span上應該是會被觸發(fā)click事件的!如果不行你就在span上也綁定click事件吧!記得加上return

false

當前題目：jquery的事件冒泡,jq阻止事件冒泡的方法
URL地址：http://www.chinadenli.net/article36/dsdjcpg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供響應式網(wǎng)站、移動網(wǎng)站建設、企業(yè)建站、ChatGPT、云服務器、網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)