|
|
如果你對JavaScript事件冒泡還沒有什么印象，不妨先看看我之前寫的一篇博客《JavaScript事件冒泡簡介及應用》。本文講究實用，不在對JavaScript事件冒泡基礎知識進行過多的闡述。
在文章開始之前，現在先看看下面這樣一個需求：下面HTML假設描述的是一個WebGame項目包裹欄（玩過網游的人應該知道什么是包裹欄或物品欄）的外框架，拖動這個包裹標題欄可以拖動這個包裹到頁面上任何位置，而點擊標題欄右側的“×”關閉按鈕可以關閉這個包裹欄的顯示。你通過觀察HTML結構，可以發現那個關閉按鈕其實是一個A鏈接，而且是作為標題欄H5的子元素存在。要想拖動一個元素，我們會想到向拖動的句柄元素注冊mousedown事件，而點擊或“單擊”關閉按鈕就關閉這個包裹。根據這個需求，我們很快得到下面這樣的代碼。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
在上面的例子中，你發現點擊關閉按鈕的時候，標題欄的mousedown事件也觸發了，顯然這是在你意料之中的，因為你知道這正是JavaScript事件冒泡在起作用。其實你真正要的效果是點關閉按鈕的時候，不要執行標題H5注冊的mousedown事件，于是你想到了阻止事件冒泡，接著代碼修改成下面這樣：
復制代碼 代碼如下:
<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);
}
//阻止事件冒泡函數
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation();
else
window.event.cancelBubble=true;
}
</script>
結果你發現單擊關閉按鈕的時候，標題H5注冊的mousedown事件還是執行了，這是怎么回事呢？其實細心的你可能發現，H5標題和A鏈接注冊的事件不是一樣的，在上面的代碼中，我們在A鏈接注冊的click事件中調用阻止事件方法，這只是意味著其父元素注冊的“同類事件”不會執行，意思是說如果H5標題也注冊了click事件，這個click事件不會執行，而這里的mousedown就繼續執行了。這里的mousedown執行不是因為你點中標題欄而發生的，是由于你在單擊click的時候伴隨產生mousedown事件，然后又由于JavaScript事件冒泡機制的存在，事件向父級廣播并被H5標題mousedown注冊方法捕獲。關于對這點的理解，可以參考我另外一篇博客《當onmousedown、onmouseup、onclick同時應用于同一個標簽節點Element》。現在，通過分析，你應該知道怎么做了，小改上面的代碼，只要把A鏈接的click事件改成與H5標題一樣的mousedown事件，你想要的效果就實現了。
相關話題：
現在講講如何在使用jQuery開發時輕松阻止事件冒泡。jQuery作為一個優秀的腳本框架，對事件的封裝及瀏覽器兼容處理自然也是很出眾的。想了解更多也可閱讀我的另外一篇博客《利用jQuery的$.event.fix函數統一瀏覽器event處理》。
使用jQuery要想阻止事件冒泡方法有二：
1、利用jQuery做過兼容處理的event對象，直接使用event.preventDefault()，舉例代碼如下：
復制代碼 代碼如下:
<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綁定的函數中返回false，即return false。注意：不是使用jQuery綁定的方法返回false是沒有用的。代碼如下：
復制代碼 代碼如下:
<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>
最后還要說明一下，利用第二個方法阻止事件冒泡，同時也阻止了瀏覽器的默認行為，在jQuery事件處理的源代碼的handle方法中（jQuery JavaScript Library v1.3.2非壓縮代碼2700行）我們可以看到向下面這樣的處理，event.preventDefault()用于阻止瀏覽器默認行為。
復制代碼 代碼如下:
handle : function(event)
{
//other code......
if (ret === false)
{
event.preventDefault();
event.stopPropagation();
}
//other code......
}
作者：WebFlash
JavaScript技術：JavaScript 事件冒泡應用實例分析，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
