? ? ????? 在jQuery事件綁定中，dbclick可以觸發兩次click事件。例如一個DOM元素div，既綁定了 click 事件，又綁定了 dblclick 事件，這兩個事件分別要做獨立的事情。事件處理上沒有沖突，都可以各自完成各自的操作。雙擊的時候雖然是執行了 dblclick 事件，但是在這之前，也執行了click 事件，那么，如何來禁止或者說屏蔽這次多余的 click 事件呢？本文將提供給您一個比較好的解決辦法。

產生原理分析
　　首先，來了解一下點擊事件發生的先后順序：

單擊：mousedown, mouseup, click
雙擊：mousedown, mouseup, click, mousedown, mouseup, click, dblclick
　　由此看來，dblclick 事件發生之前，實際上發生了兩次 click 事件。其中，第一次的 click 是會被屏蔽掉，但是第二次則不會，所以就出現在雙擊的時候，也觸發 click 事件。

解決辦法
　　知道了原因，接下來自然就是想辦法把這次 click 給屏蔽掉，但是由于各瀏覽器均未提供直接去停止事件的方法，所以值得改變思路。
　　由于我們只需要屏蔽一次 click 事件即可，由此聯想到，可以利用 setTimeout() 方法來延時完成 click 事件的處理，在需要停止 click 的時候利用 clearTimeout() 方法停止這一事件的處理。這樣，就可以比較容易的寫出如下的 javascript 代碼：

var timer = null; function do_click(event) {
?clearTimeout(timer); // 這里加一句是為了兼容 Gecko 的瀏覽器 /
if (event.detail == 2)?
return ;?
// 同上句的作用?
timer = setTimeout(function() {?
// click 事件的處理?
}, 300); }?
function do_dblclick(event) {?
clearTimeout(timer);
?// dblclick 事件的處理?
}

問題總結
　　從測試結果來看，如果前后兩次點擊的時間在 300ms 左右的時候，還是很容易出現 click 和 dblclick 事件被“同時”調用的情況，而如果間隔的時間更短或更長，則只會有 click 或 dblclick 事件。
　　所以，應該說這個方法已經在很大程度上，避免了 click 和 dblclick 事件的“同時”存在問題。當然，它還沒有達到完全解決的程度。

注意
??? windows 的控制面板里是可以調鼠標的雙擊速度的（Linux 等系統下能不能調，俺就不清楚了），這點對于程序還是有一定影響，大家可以自己調節下試試看～
經過測試，延時 300ms 是一個比較理想的事件，既考慮到對鼠標操作并不十分順利的朋友，也兼顧 click 事件的響應速度

??? 以上代碼，只在 IE6、FF3、Chrome 中測試過，并未出現問題

? ? w3c標準是沒有dblclick的，而是通過event.detail來判斷是單擊或雙擊

? ? ? ? ? ? ?

? <input type="button" οnclick="OneClick()" οndblclick="TwoClick()" value="點我">
??????????????????????????????????? <script language="javascript">
??????????????????????????????????????? var v_Result;
??????????????????????????????????????? function OneClick() {
??????????????????????????????????????????? v_Result = false;
??????????????????????????????????????????? window.setTimeout(OneClick_Nei, 500)
??????????????????????????????????????????? function OneClick_Nei() {
??????????????????????????????????????????????? if (v_Result != false) return;
??????????????????????????????????????????????? alert("單擊");
??????????????????????????????????????????? }
??????????????????????????????????????? }
??????????????????????????????????????? function TwoClick() {
??????????????????????????????????????????? v_Result = true;
??????????????????????????????????????????? alert("雙擊");
??????????????????????????????????????? }
??????????????????????????????????? </script>

總結

以上是生活随笔為你收集整理的javascript 双击单机 解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。