jQuery中dbclick事件觸發(fā)兩次click事件的解決方法

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

產(chǎn)生原理分析
　　首先，來了解一下點(diǎn)擊事件發(fā)生的先后順序：

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

解決辦法
　　知道了原因，接下來自然就是想辦法把這次 click 給屏蔽掉，但是由于各瀏覽器均未提供直接去停止事件的方法，所以值得改變思路。
　　由于我們只需要屏蔽一次 click 事件即可，由此聯(lián)想到，可以利用 setTimeout() 方法來延時(shí)完成 click 事件的處理，在需要停止 click 的時(shí)候利用 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 事件的處理
}
問題總結(jié)
　　從測(cè)試結(jié)果來看，如果前后兩次點(diǎn)擊的時(shí)間在 300ms 左右的時(shí)候，還是很容易出現(xiàn) click 和 dblclick 事件被“同時(shí)”調(diào)用的情況，而如果間隔的時(shí)間更短或更長，則只會(huì)有 click 或 dblclick 事件。
　　所以，應(yīng)該說這個(gè)方法已經(jīng)在很大程度上，避免了 click 和 dblclick 事件的“同時(shí)”存在問題。當(dāng)然，它還沒有達(dá)到完全解決的程度。
注意
windows 的控制面板里是可以調(diào)鼠標(biāo)的雙擊速度的（Linux 等系統(tǒng)下能不能調(diào)，俺就不清楚了），這點(diǎn)對(duì)于程序還是有一定影響，大家可以自己調(diào)節(jié)下試試看～
經(jīng)過測(cè)試，延時(shí) 300ms 是一個(gè)比較理想的事件，既考慮到對(duì)鼠標(biāo)操作并不十分順利的朋友，也兼顧 click 事件的響應(yīng)速度
以上代碼，只在 IE6、FF3、Chrome 中測(cè)試過，并未出現(xiàn)問題

w3c標(biāo)準(zhǔn)是沒有dblclick的，而是通過event.detail來判斷是單擊或雙擊

原文：http://www.js8.in/610.html

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)