|
|
如果你對(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)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
