快捷導(dǎo)航

JavaScript 事件冒泡應(yīng)用實(shí)例分析

更新時(shí)間：2010年01月11日 00:54:38 作者：

在一些傳統(tǒng)的小型WEB應(yīng)用開(kāi)發(fā)過(guò)程中，JavaScript通常只是拿來(lái)做表單驗(yàn)證而以，所以你很少會(huì)遇到因?yàn)镴avaScript事件冒泡而影響功能的實(shí)現(xiàn)情況，又或者事件冒泡對(duì)最終實(shí)現(xiàn)效果影響不大，可忽略。

然而，在今天一些大型的WEB交互項(xiàng)目中，比如大型的WebGame項(xiàng)目，JavaScript事件冒泡影響是值得重視的。本文通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)講解JavaScript事件冒泡及使用注意事項(xiàng)。

如果你對(duì)JavaScript事件冒泡還沒(méi)有什么印象，不妨先看看我之前寫(xiě)的一篇博客《JavaScript事件冒泡簡(jiǎn)介及應(yīng)用》。本文講究實(shí)用，不在對(duì)JavaScript事件冒泡基礎(chǔ)知識(shí)進(jìn)行過(guò)多的闡述。

在文章開(kāi)始之前，現(xiàn)在先看看下面這樣一個(gè)需求：下面HTML假設(shè)描述的是一個(gè)WebGame項(xiàng)目包裹欄（玩過(guò)網(wǎng)游的人應(yīng)該知道什么是包裹欄或物品欄）的外框架，拖動(dòng)這個(gè)包裹標(biāo)題欄可以拖動(dòng)這個(gè)包裹到頁(yè)面上任何位置，而點(diǎn)擊標(biāo)題欄右側(cè)的“×”關(guān)閉按鈕可以關(guān)閉這個(gè)包裹欄的顯示。你通過(guò)觀察HTML結(jié)構(gòu)，可以發(fā)現(xiàn)那個(gè)關(guān)閉按鈕其實(shí)是一個(gè)A鏈接，而且是作為標(biāo)題欄H5的子元素存在。要想拖動(dòng)一個(gè)元素，我們會(huì)想到向拖動(dòng)的句柄元素注冊(cè)mousedown事件，而點(diǎn)擊或“單擊”關(guān)閉按鈕就關(guān)閉這個(gè)包裹。根據(jù)這個(gè)需求，我們很快得到下面這樣的代碼。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

在上面的例子中，你發(fā)現(xiàn)點(diǎn)擊關(guān)閉按鈕的時(shí)候，標(biāo)題欄的mousedown事件也觸發(fā)了，顯然這是在你意料之中的，因?yàn)槟阒肋@正是JavaScript事件冒泡在起作用。其實(shí)你真正要的效果是點(diǎn)關(guān)閉按鈕的時(shí)候，不要執(zhí)行標(biāo)題H5注冊(cè)的mousedown事件，于是你想到了阻止事件冒泡，接著代碼修改成下面這樣：

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

 
<div id="box"> 
<h5 onmousedown="startDrag();"><a onclick="closeBox(event);" href="javascript:void(0);">×</a></h5> 
<div id="testInfo"></div> 
</div> 
<script type="text/javascript"> 
function startDrag() 
{ 
document.getElementById('testInfo').innerHTML += 'startDrag<br/>'; 
} 
function closeBox(e) 
{ 
document.getElementById('testInfo').innerHTML += 'closeBox<br/>'; 
stopBubble(e); 
} 
//阻止事件冒泡函數(shù) 
function stopBubble(e) 
{ 
if (e && e.stopPropagation) 
e.stopPropagation(); 
else 
window.event.cancelBubble=true; 
} 
</script> 

結(jié)果你發(fā)現(xiàn)單擊關(guān)閉按鈕的時(shí)候，標(biāo)題H5注冊(cè)的mousedown事件還是執(zhí)行了，這是怎么回事呢？其實(shí)細(xì)心的你可能發(fā)現(xiàn)，H5標(biāo)題和A鏈接注冊(cè)的事件不是一樣的，在上面的代碼中，我們?cè)贏鏈接注冊(cè)的click事件中調(diào)用阻止事件方法，這只是意味著其父元素注冊(cè)的“同類事件”不會(huì)執(zhí)行，意思是說(shuō)如果H5標(biāo)題也注冊(cè)了click事件，這個(gè)click事件不會(huì)執(zhí)行，而這里的mousedown就繼續(xù)執(zhí)行了。這里的mousedown執(zhí)行不是因?yàn)槟泓c(diǎn)中標(biāo)題欄而發(fā)生的，是由于你在單擊click的時(shí)候伴隨產(chǎn)生mousedown事件，然后又由于JavaScript事件冒泡機(jī)制的存在，事件向父級(jí)廣播并被H5標(biāo)題mousedown注冊(cè)方法捕獲。關(guān)于對(duì)這點(diǎn)的理解，可以參考我另外一篇博客《當(dāng)onmousedown、onmouseup、onclick同時(shí)應(yīng)用于同一個(gè)標(biāo)簽節(jié)點(diǎn)Element》。現(xiàn)在，通過(guò)分析，你應(yīng)該知道怎么做了，小改上面的代碼，只要把A鏈接的click事件改成與H5標(biāo)題一樣的mousedown事件，你想要的效果就實(shí)現(xiàn)了。
相關(guān)話題：
現(xiàn)在講講如何在使用jQuery開(kāi)發(fā)時(shí)輕松阻止事件冒泡。jQuery作為一個(gè)優(yōu)秀的腳本框架，對(duì)事件的封裝及瀏覽器兼容處理自然也是很出眾的。想了解更多也可閱讀我的另外一篇博客《利用jQuery的$.event.fix函數(shù)統(tǒng)一瀏覽器event處理》。
使用jQuery要想阻止事件冒泡方法有二：
1、利用jQuery做過(guò)兼容處理的event對(duì)象，直接使用event.preventDefault()，舉例代碼如下：

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

 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script> 
<div id="box"> 
<h5 onmousedown="startDrag();"><a onmousedown="closeBox(event);" href="javascript:void(0);">×</a></h5> 
<div id="testInfo"></div> 
</div> 
<script type="text/javascript"> 
function startDrag() 
{ 
document.getElementById('testInfo').innerHTML += 'startDrag<br/>'; 
} 
function closeBox(e) 
{ 
document.getElementById('testInfo').innerHTML += 'closeBox<br/>'; 
var event = $.event.fix(e); 
event.stopPropagation(); 
} 
</script> 

2、在jQuery綁定的函數(shù)中返回false，即return false。注意：不是使用jQuery綁定的方法返回false是沒(méi)有用的。代碼如下：

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

 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script> 
<div id="box"> 
<h5 onmousedown="startDrag();"><a href="javascript:void(0);">×</a></h5> 
<div id="testInfo"></div> 
</div> 
<script type="text/javascript"> 
function startDrag() 
{ 
document.getElementById('testInfo').innerHTML += 'startDrag<br/>'; 
} 
function closeBox() 
{ 
document.getElementById('testInfo').innerHTML += 'closeBox<br/>'; 
return false; 
} 
$('#box a').bind('mousedown',closeBox); 
</script> 

最后還要說(shuō)明一下，利用第二個(gè)方法阻止事件冒泡，同時(shí)也阻止了瀏覽器的默認(rèn)行為，在jQuery事件處理的源代碼的handle方法中（jQuery JavaScript Library v1.3.2非壓縮代碼2700行）我們可以看到向下面這樣的處理，event.preventDefault()用于阻止瀏覽器默認(rèn)行為。

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

 
handle : function(event) 
{ 
//other code...... 
if (ret === false) 
{ 
event.preventDefault(); 
event.stopPropagation(); 
} 
//other code...... 
} 

作者：WebFlash

您可能感興趣的文章: