|
|
先通過一個簡單例子測試并發現我說的問題，讓你有個直觀的印象，再接著看我的解決辦法。
復制代碼 代碼如下:
<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>
現在假設有這樣一個需求：在一張圖片上按下mousedown開始拖動這張圖片，而在這張圖片上發生mouseup鼠標釋放就顯示這張圖片的相關信息。正常情況下要想mouseup綁定的函數執行，那么mousedown綁定的函數也執行了，而且還是先執行的，也就是說在你查看圖片信息的時候，圖片也在拖動中。其實你正真希望的可能是每次執行其中一個方法就好了，比如當你按下鼠標并很快就釋放掉時，其實你是想看圖片信息，而不是想拖動圖片；相反，如果你按下鼠標并停頓了一下，表明你是想準備拖動圖片，這時候查看信息方法不要執行。這怎么做到的呢，根據上面的分析，我發現可以用setTimeout函數來加以處理實現這樣的需求（當然，如果你有發現更好的解決辦法，一定要記得與我分享，哈）。下面給出完整例子，很簡單，也加了注釋，不另外解釋了：
復制代碼 代碼如下:
<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每次都會調用的，在這里重新初始化這個變量
isMouseDownDoing = false;
//延遲200毫秒才調用onmousedown真正的處理代碼，如果在200毫秒內就釋放鼠標，把 doMouseDownTimmer清除，那么onmousedown即使調用了，其實是沒有調用到doMouseDown函數作為 onmousedown真正要處理的代碼
doMouseDownTimmer = setTimeout(doMouseDown,200);
}
function doMouseDown()
{
//如果200毫秒后調用了這個方法，把isMouseDownDoing設置成true，表明發生了mouseDown實際處理，此后mouseUp就不要處理了
isMouseDownDoing = true;
document.getElementById('div1').innerHTML += 'mouseDown<br/>';
}
function mouseUpFun()
{
if (!isMouseDownDoing)
{
clearTimeout(doMouseDownTimmer); //能進到這里來，不管三七二十一先把doMouseDownTimmer清除，不然200毫秒后doMouseDown方法還是會被調用的
document.getElementById('div1').innerHTML += 'mouseUp<br/>';
}
}
</script>
相關話題：因為平時經常用的click事件都跑在mousedown、mouseup之后，我們可以用mouseup代替click（上面的例子就是這樣用的），此時Element上就不要再注冊click事件。當然，可以的話，還可以直接拿mousedown代替click，事件響應將更快，其中在Google的一些產品中有看到這樣的寫法，比如Gmail。
JavaScript技術：javascript當onmousedown、onmouseup、onclick同時應用于同一個標簽節點Element，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
