|
如果你對(duì)JavaScript事件冒泡還沒有什么印象,不妨先看看我之前寫的一篇博客《JavaScript事件冒泡簡(jiǎn)介及應(yīng)用》。本文講究實(shí)用,不在對(duì)JavaScript事件冒泡基礎(chǔ)知識(shí)進(jìn)行過多的闡述。
在文章開始之前,現(xiàn)在先看看下面這樣一個(gè)需求:下面HTML假設(shè)描述的是一個(gè)WebGame項(xiàng)目包裹欄(玩過網(wǎng)游的人應(yīng)該知道什么是包裹欄或物品欄)的外框架,拖動(dòng)這個(gè)包裹標(biāo)題欄可以拖動(dòng)這個(gè)包裹到頁(yè)面上任何位置,而點(diǎn)擊標(biāo)題欄右側(cè)的“×”關(guān)閉按鈕可以關(guān)閉這個(gè)包裹欄的顯示。你通過觀察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需刷新才能執(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í)行,意思是說如果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)在,通過分析,你應(yīng)該知道怎么做了,小改上面的代碼,只要把A鏈接的click事件改成與H5標(biāo)題一樣的mousedown事件,你想要的效果就實(shí)現(xiàn)了。
相關(guān)話題:
現(xiàn)在講講如何在使用jQuery開發(fā)時(shí)輕松阻止事件冒泡。jQuery作為一個(gè)優(yōu)秀的腳本框架,對(duì)事件的封裝及瀏覽器兼容處理自然也是很出眾的。想了解更多也可閱讀我的另外一篇博客《利用jQuery的$.event.fix函數(shù)統(tǒng)一瀏覽器event處理》。
使用jQuery要想阻止事件冒泡方法有二:
1、利用jQuery做過兼容處理的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是沒有用的。代碼如下:
復(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>
最后還要說明一下,利用第二個(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
JavaScript技術(shù):JavaScript 事件冒泡應(yīng)用實(shí)例分析,轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。