如何理解jquery事件冒泡

事件冒泡（IE提出）：

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

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

事件捕獲：

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

PS：假設(shè)有一個(gè)文檔，節(jié)點(diǎn)為 html→body→div→button 。

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

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

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

舉個(gè)例子：

事件冒泡：

!DOCTYPE?html

html

head

meta?charset="utf-8"

script

function?body_click()?{

alert('Body被點(diǎn)擊了')

}

function?div_click()?{

alert('Div被點(diǎn)擊了')

}

function?button_click()?{

alert('Button被點(diǎn)擊了')

}

/script

/head

body?onclick="body_click()"

div?onclick="div_click()"

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

/div

/body

/html

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

然后是事件捕獲：

!DOCTYPE?html

html

head

meta?charset="utf-8"

script

window.onload?=?function()?{

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

alert('Button被點(diǎn)擊了')

},true);

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

alert('Div被點(diǎn)擊了')

},true);

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

alert('Body被點(diǎn)擊了')

},true);

}

/script

/head

body?id="body"

div?id="div"

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

/div

/body

/html

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

jquery怎么寫事件冒泡

事件冒泡不需要寫，瀏覽器就是這樣的機(jī)制，只是要學(xué)會(huì)利用

什么是JS事件冒泡？

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

如何來阻止Jquery事件冒泡？

通過一個(gè)小例子來解釋

復(fù)制代碼代碼如下:

%@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('我是最里層！')"點(diǎn)擊我/a

/div

/div

/form

/body

/html

比如上面這個(gè)頁面，

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

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

運(yùn)行頁面，點(diǎn)擊“點(diǎn)擊我”,會(huì)依次彈出：我是最里層----我是中間層----我是最外層----然后再鏈接到百度.

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

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

如何來阻止?

1.event.stopPropagation();

復(fù)制代碼代碼如下:

scripttype="text/javascript"

$(function(){

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

event.stopPropagation();

});

});

script

再點(diǎn)擊“點(diǎn)擊我”，會(huì)彈出：我是最里層，然后鏈接到百度

2.returnfalse;

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

復(fù)制代碼代碼如下:

scripttype="text/javascript"

$(function(){

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

returnfalse;

});

});

script

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

由此可以看出：

1.event.stopPropagation();

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

2.returnfalse;

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

還有一種有冒泡有關(guān)的：

3.event.preventDefault();

如果把它放在頭部A標(biāo)簽的click事件中，點(diǎn)擊“點(diǎn)擊我”。

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

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

jquery 事件使用冒泡問題

同學(xué)你這個(gè)應(yīng)該不是冒泡導(dǎo)致的!所謂的冒泡是這樣的:假如body包含div,div包含span.

同時(shí)這3個(gè)元素上都綁定了click事件!這個(gè)時(shí)候如果你點(diǎn)擊span的時(shí)候就會(huì)依次觸發(fā):

spandivbody的click事件!

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

return

false;即可

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

false

當(dāng)前題目：jquery的事件冒泡,jq阻止事件冒泡的方法
URL地址：http://jinyejixie.com/article36/dsdjcpg.html

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

廣告

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