javascript當onmousedown、onmouseup、onclick同時應用於同一個標籤節點Element

因為在JavaScript中，mousedown、mouseup、click執行順序是從左至右的，更重要的是一旦mousedown事件啟用，正常情況（不在mousedown事件中綁定的方法使用alert類似方法，因為彈出對象框就阻止了事件傳遞，即後續呼叫事件丟失）下後面兩個事件也肯定會被啟用。平時我們在一個標籤上只綁定一個click事件，其實觸發click事件也都調用了mousedown、mouseup等事件，只是它們調用周期極短，而且我們又沒有編寫相關函數與這兩個事件綁定，所以不會覺察到。現在假設你要在一個標籤上同時註冊這幾個事件，並具綁定指定的處理函數，在實際開發中，你將會遇到我下面提及的問題。
先通過一個簡單例子測試並發現我說的問題，讓你有個直觀的印象，再接著看我的解決辦法。 複製代碼 代碼如下:<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。