|
|
先通過一個簡單例子測試并發(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í)行的，也就是說在你查看圖片信息的時候，圖片也在拖動中。其實(shí)你正真希望的可能是每次執(zhí)行其中一個方法就好了，比如當(dāng)你按下鼠標(biāo)并很快就釋放掉時，其實(shí)你是想看圖片信息，而不是想拖動圖片；相反，如果你按下鼠標(biāo)并停頓了一下，表明你是想準(zhǔn)備拖動圖片，這時候查看信息方法不要執(zhí)行。這怎么做到的呢，根據(jù)上面的分析，我發(fā)現(xiàn)可以用setTimeout函數(shù)來加以處理實(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)用了，其實(shí)是沒有調(diào)用到doMouseDown函數(shù)作為 onmousedown真正要處理的代碼
doMouseDownTimmer = setTimeout(doMouseDown,200);
}
function doMouseDown()
{
//如果200毫秒后調(diào)用了這個方法，把isMouseDownDoing設(shè)置成true，表明發(fā)生了mouseDown實(shí)際處理，此后mouseUp就不要處理了
isMouseDownDoing = true;
document.getElementById('div1').innerHTML += 'mouseDown<br/>';
}
function mouseUpFun()
{
if (!isMouseDownDoing)
{
clearTimeout(doMouseDownTimmer); //能進(jìn)到這里來，不管三七二十一先把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。
JavaScript技術(shù)：javascript當(dāng)onmousedown、onmouseup、onclick同時應(yīng)用于同一個標(biāo)簽節(jié)點(diǎn)Element，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
