一、什么是jquery事件冒泡
在很多教材或者手冊(cè)都可能會(huì)涉及到事件冒泡的概念，老手來(lái)說(shuō)這當(dāng)然是最基本的概念，但往往對(duì)于初學(xué)者可能比較陌生或者說(shuō)從來(lái)沒(méi)有聽(tīng)說(shuō)過(guò)。下面就結(jié)合代碼實(shí)例來(lái)簡(jiǎn)單介紹一下什么是事件冒泡。
代碼實(shí)例如下:
<html><head><meta charset=" gb2312"><title>事件冒泡</title><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){ $("#second").click(function(){ alert("我是second"); }) $("#first").click(function(){ alert("我是first"); })})</script></head><body><p id="first"><a id="second" >點(diǎn)擊查看效果</a></p></body></html>在以上代碼中，我們可能只想點(diǎn)擊錨點(diǎn)后彈出“我是third”，但是令人奇怪的事情卻是所有父元素定義的click事件都會(huì)被觸發(fā)。這就是一個(gè)典型的事件冒泡效果。所謂的冒泡事件就是，如果在某一個(gè)對(duì)象上觸發(fā)某一類事件（如上例的click事件），那么此事件會(huì)向?qū)ο蟮母讣?jí)對(duì)象傳播，并觸發(fā)父對(duì)象上定義的同類事件。事件傳播的方向是從最底層到最頂層，類似于水泡從水底浮上來(lái)一般。
二、javascript如何阻止事件冒泡
冒泡事件能夠帶來(lái)便利，有時(shí)候也會(huì)帶來(lái)麻煩，下面就簡(jiǎn)單介紹一下如何阻止事件冒泡。
代碼實(shí)例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <head><title>事件冒泡</title><style type="text/css">#grandfather{ border:1px solid #0066FF; cellpadding:0px; cellspacing:0px;}#grandfather td{ border: 1px solid #0066FF;}</style><script type="text/javascript">function trclick(){ alert("父親的onclick事件觸發(fā)");}function tableclick(){ alert("祖父的onclick事件觸發(fā)");}window.onload=function(){ var grandfather=document.getElementById("grandfather"); var father=document.getElementById("father"); var noStop=document.getElementById("noStop"); var haveStop=document.getElementById("haveStop"); grandfather.onclick=tableclick; father.onclick=trclick; noStop.onclick=function(){ alert("沒(méi)有阻止冒泡的子元素"); } haveStop.onclick=function(evt){ alert("阻止冒泡的子元素"); if(window.event){ event.cancelBubble=true; } else if(evt){ evt.stopPropagation(); } }}</script></head><body><table width="204" id="grandfather"> <tr > <td width="96"></td> <td width="96"></td> </tr> <tr id="father"> <td id="noStop">沒(méi)有阻止事件冒泡</td> <td id="haveStop">阻止了事件冒泡</td> </tr> <tr> <td> </td> <td> </td> </tr></table></body></html>代碼注釋:
1.if(window.event)這個(gè)用來(lái)兼容IE8和IE8一下瀏覽器。
2. evt.stopPropagation()這個(gè)是標(biāo)準(zhǔn)瀏覽器。
以上代碼中，一個(gè)單元格阻止了事件冒泡，一個(gè)沒(méi)有阻止事件冒泡，希望對(duì)大家的學(xué)習(xí)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
