javascript當onmousedown、onmouseup、onclick同時應用于同一個標簽節點
2024-05-06 14:12:03
供稿：網友
因為在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()
