快捷導(dǎo)航

javascript當(dāng)onmousedown、onmouseup、onclick同時應(yīng)用于同一個標(biāo)簽節(jié)點Element

更新時間：2010年01月05日 17:18:58 作者：

先通過一個簡單例子測試并發(fā)現(xiàn)我說的問題，讓你有個直觀的印象，再接著看我的解決辦法。

因為在JavaScript中，mousedown、mouseup、click執(zhí)行順序是從左到右的，更重要的是一旦mousedown事件激活，正常情況（不在mousedown事件中綁定的方法使用alert類似方法，因為彈出對象框就阻止了事件傳遞，即后續(xù)調(diào)用事件丟失）下后面兩個事件也肯定會被激活。平時我們在一個標(biāo)簽上只綁定一個click事件，其實觸發(fā)click事件也都調(diào)用了mousedown、mouseup等事件，只是它們調(diào)用周期極短，而且我們又沒有編寫相關(guān)函數(shù)與這兩個事件綁定，所以不會覺察到。現(xiàn)在假設(shè)你要在一個標(biāo)簽上同時注冊這幾個事件，并具綁定指定的處理函數(shù)，在實際開發(fā)中，你將會遇到我下面提及的問題。
先通過一個簡單例子測試并發(fā)現(xiàn)我說的問題，讓你有個直觀的印象，再接著看我的解決辦法。

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

 
<div id="div1" onmousedown="mouseDownFun();" onmouseup="mouseUpFun();" onclick="clickFun();" style="background:#CCC; border:3px solid #999; width:200px; height:200px; padding:10px"></div> 
<input style="margin-top:10px" type="button" onclick="document.getElementById('div1').innerHTML='';" value="清除信息" /> 
<script type="text/javascript"> 
function mouseDownFun() 
{ 
document.getElementById('div1').innerHTML += 'mouseDown<br/>'; 
} 
function mouseUpFun() 
{ 
document.getElementById('div1').innerHTML += 'mouseUp<br/>'; 
} 
function clickFun() 
{ 
document.getElementById('div1').innerHTML += 'click<br/>'; 
} 
</script> 

現(xiàn)在假設(shè)有這樣一個需求：在一張圖片上按下mousedown開始拖動這張圖片，而在這張圖片上發(fā)生mouseup鼠標(biāo)釋放就顯示這張圖片的相關(guān)信息。正常情況下要想mouseup綁定的函數(shù)執(zhí)行，那么mousedown綁定的函數(shù)也執(zhí)行了，而且還是先執(zhí)行的，也就是說在你查看圖片信息的時候，圖片也在拖動中。其實你正真希望的可能是每次執(zhí)行其中一個方法就好了，比如當(dāng)你按下鼠標(biāo)并很快就釋放掉時，其實你是想看圖片信息，而不是想拖動圖片；相反，如果你按下鼠標(biāo)并停頓了一下，表明你是想準(zhǔn)備拖動圖片，這時候查看信息方法不要執(zhí)行。這怎么做到的呢，根據(jù)上面的分析，我發(fā)現(xiàn)可以用setTimeout函數(shù)來加以處理實現(xiàn)這樣的需求（當(dāng)然，如果你有發(fā)現(xiàn)更好的解決辦法，一定要記得與我分享，哈）。下面給出完整例子，很簡單，也加了注釋，不另外解釋了：

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

 
<div id="div1" onmousedown="mouseDownFun();" onmouseup="mouseUpFun();" style="background:#CCC; border:3px solid #999; width:200px; height:200px; padding:10px"></div> 
<input style="margin-top:10px" type="button" onclick="document.getElementById('div1').innerHTML='';" value="清除信息" /> 
<script type="text/javascript"> 
var doMouseDownTimmer = null; 
var isMouseDownDoing = false; 
function mouseDownFun() 
{ 
//因為mouseDownFun每次都會調(diào)用的，在這里重新初始化這個變量 
isMouseDownDoing = false; 
//延遲200毫秒才調(diào)用onmousedown真正的處理代碼，如果在200毫秒內(nèi)就釋放鼠標(biāo)，把 doMouseDownTimmer清除，那么onmousedown即使調(diào)用了，其實是沒有調(diào)用到doMouseDown函數(shù)作為 onmousedown真正要處理的代碼 
doMouseDownTimmer = setTimeout(doMouseDown,200); 
} 
function doMouseDown() 
{ 
//如果200毫秒后調(diào)用了這個方法，把isMouseDownDoing設(shè)置成true，表明發(fā)生了mouseDown實際處理，此后mouseUp就不要處理了 
isMouseDownDoing = true; 
document.getElementById('div1').innerHTML += 'mouseDown<br/>'; 
} 
function mouseUpFun() 
{ 
if (!isMouseDownDoing) 
{ 
clearTimeout(doMouseDownTimmer); //能進到這里來，不管三七二十一先把doMouseDownTimmer清除，不然200毫秒后doMouseDown方法還是會被調(diào)用的 
document.getElementById('div1').innerHTML += 'mouseUp<br/>'; 
} 
} 
</script> 

相關(guān)話題：因為平時經(jīng)常用的click事件都跑在mousedown、mouseup之后，我們可以用mouseup代替click（上面的例子就是這樣用的），此時Element上就不要再注冊click事件。當(dāng)然，可以的話，還可以直接拿mousedown代替click，事件響應(yīng)將更快，其中在Google的一些產(chǎn)品中有看到這樣的寫法，比如Gmail。

您可能感興趣的文章: