JavaScript 事件冒泡應用實例分析

2019-11-21 00:48:59

字體：大中小

來源：轉載

供稿：網友

然而，在今天一些大型的WEB交互項目中，比如大型的WebGame項目，JavaScript事件冒泡影響是值得重視的。本文通過一個簡單的例子來講解JavaScript事件冒泡及使用注意事項。

如果你對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.VeVB.COm/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.VeVB.COm/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 讀書筆記索引貼