快捷導(dǎo)航

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

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

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

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

復(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è)有這樣一個(gè)需求：在一張圖片上按下mousedown開始拖動(dòng)這張圖片，而在這張圖片上發(fā)生mouseup鼠標(biāo)釋放就顯示這張圖片的相關(guān)信息。正常情況下要想mouseup綁定的函數(shù)執(zhí)行，那么mousedown綁定的函數(shù)也執(zhí)行了，而且還是先執(zhí)行的，也就是說(shuō)在你查看圖片信息的時(shí)候，圖片也在拖動(dòng)中。其實(shí)你正真希望的可能是每次執(zhí)行其中一個(gè)方法就好了，比如當(dāng)你按下鼠標(biāo)并很快就釋放掉時(shí)，其實(shí)你是想看圖片信息，而不是想拖動(dòng)圖片；相反，如果你按下鼠標(biāo)并停頓了一下，表明你是想準(zhǔn)備拖動(dòng)圖片，這時(shí)候查看信息方法不要執(zhí)行。這怎么做到的呢，根據(jù)上面的分析，我發(fā)現(xiàn)可以用setTimeout函數(shù)來(lái)加以處理實(shí)現(xiàn)這樣的需求（當(dāng)然，如果你有發(fā)現(xiàn)更好的解決辦法，一定要記得與我分享，哈）。下面給出完整例子，很簡(jiǎ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() 
{ 
//因?yàn)閙ouseDownFun每次都會(huì)調(diào)用的，在這里重新初始化這個(gè)變量 
isMouseDownDoing = false; 
//延遲200毫秒才調(diào)用onmousedown真正的處理代碼，如果在200毫秒內(nèi)就釋放鼠標(biāo)，把 doMouseDownTimmer清除，那么onmousedown即使調(diào)用了，其實(shí)是沒有調(diào)用到doMouseDown函數(shù)作為 onmousedown真正要處理的代碼 
doMouseDownTimmer = setTimeout(doMouseDown,200); 
} 
function doMouseDown() 
{ 
//如果200毫秒后調(diào)用了這個(gè)方法，把isMouseDownDoing設(shè)置成true，表明發(fā)生了mouseDown實(shí)際處理，此后mouseUp就不要處理了 
isMouseDownDoing = true; 
document.getElementById('div1').innerHTML += 'mouseDown<br/>'; 
} 
function mouseUpFun() 
{ 
if (!isMouseDownDoing) 
{ 
clearTimeout(doMouseDownTimmer); //能進(jìn)到這里來(lái)，不管三七二十一先把doMouseDownTimmer清除，不然200毫秒后doMouseDown方法還是會(huì)被調(diào)用的 
document.getElementById('div1').innerHTML += 'mouseUp<br/>'; 
} 
} 
</script> 

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

您可能感興趣的文章: