click與dblclick事件衝突解決方法
阿新 • • 發佈：2019-02-03
一個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 程式碼：
| 1 2 3 4 5 6 7 8 9 10 |
var
timer = null;
$('button').live('click',
function(event){
timer && clearTimeout(timer);
timer = setTimeout(function(){
console.log(event.type);
},300);
}).live('dblclick',
function(event){
timer && clearTimeout(timer);
console.log(event.type);
});
|