js不完美解決click和dblclick事件沖突問題
更新時間：2012年07月16日 01:16:18 作者：
當(dāng)某個元素，如：div，同時綁定了click事件和dblclick事件，而這兩個事件又要處理相對獨(dú)立的業(yè)務(wù)，也就是click的時候不能觸發(fā)dblclick，dblclick的時候不能觸發(fā)click
情況描述
當(dāng)某個元素，如：div，同時綁定了click事件和dblclick事件，而這兩個事件又要處理相對獨(dú)立的業(yè)務(wù)，也就是click的時候不能觸發(fā)dblclick，dblclick的時候不能觸發(fā)click。在實(shí)際測試中發(fā)現(xiàn)，當(dāng)dblclick的時候，總會出現(xiàn)1次click。下文將要解決的就是這個問題。
情況分析
首先我們要清楚click和dblclick的執(zhí)行順序，測試過程略，下面是測試結(jié)果：
click：mousedown -- mouseup -- click
dblclick：mousedown -- mouseup -- click -- mousedown -- mouseup -- click -- dblclick
由此看來，在dblclick觸發(fā)之前，實(shí)際上是執(zhí)行了2次click，而第一次的click是會屏蔽掉的（為什么？好把，我也不知道）。
解決方案
最先想到的是否可以停止事件，但發(fā)現(xiàn)瀏覽器并未提供相應(yīng)方法，如果自己去實(shí)現(xiàn)難度太大，因?yàn)閱螕羰录P(guān)聯(lián)的行為必須做成是可以被cancel的才行。
于是考慮用延遲，也是我唯一能想到的解決辦法，利用setTimeout()來延遲完成click事件的處理，然后在需要屏蔽click的時候用clearTimeout()來停止。
具體代碼
var test = (function(){
var clickText = 'click<br>';
var dblclickText = 'dblclick<br>';
var timer = null;
return {
click: function(){
clearTimeout(timer);
timer = setTimeout(function(){
$('body').append(clickText);
}, 300);
},
dblclick: function(){
clearTimeout(timer);
$('body').append(dblclickText);
},
init: function(){
$(function(){
$('div').click(test.click).dblclick(test.dblclick);
});
}
}
})();
test.init();
html代碼
<div style="width:100px;height:100px;background:red;text-align:center;line-height:33px;-moz-user-select:none;-khtml-user-select:none;user-select:none">click<br>or<br>dblclick</div>
后續(xù)
文章標(biāo)題里就說了，是不完美的，因?yàn)閣indows下，控制面板里是可以調(diào)鼠標(biāo)的雙擊速度的（其他系統(tǒng)不清楚），所以我設(shè)置系統(tǒng)設(shè)置的雙擊速度較慢，則上面那個demo就不生效了。所以300毫秒只是一個大概的。
作者：胡尐睿
當(dāng)某個元素，如：div，同時綁定了click事件和dblclick事件，而這兩個事件又要處理相對獨(dú)立的業(yè)務(wù)，也就是click的時候不能觸發(fā)dblclick，dblclick的時候不能觸發(fā)click。在實(shí)際測試中發(fā)現(xiàn)，當(dāng)dblclick的時候，總會出現(xiàn)1次click。下文將要解決的就是這個問題。
情況分析
首先我們要清楚click和dblclick的執(zhí)行順序，測試過程略，下面是測試結(jié)果：
click：mousedown -- mouseup -- click
dblclick：mousedown -- mouseup -- click -- mousedown -- mouseup -- click -- dblclick
由此看來，在dblclick觸發(fā)之前，實(shí)際上是執(zhí)行了2次click，而第一次的click是會屏蔽掉的（為什么？好把，我也不知道）。
解決方案
最先想到的是否可以停止事件，但發(fā)現(xiàn)瀏覽器并未提供相應(yīng)方法，如果自己去實(shí)現(xiàn)難度太大，因?yàn)閱螕羰录P(guān)聯(lián)的行為必須做成是可以被cancel的才行。
于是考慮用延遲，也是我唯一能想到的解決辦法，利用setTimeout()來延遲完成click事件的處理，然后在需要屏蔽click的時候用clearTimeout()來停止。
具體代碼
復(fù)制代碼 代碼如下:
var test = (function(){
var clickText = 'click<br>';
var dblclickText = 'dblclick<br>';
var timer = null;
return {
click: function(){
clearTimeout(timer);
timer = setTimeout(function(){
$('body').append(clickText);
}, 300);
},
dblclick: function(){
clearTimeout(timer);
$('body').append(dblclickText);
},
init: function(){
$(function(){
$('div').click(test.click).dblclick(test.dblclick);
});
}
}
})();
test.init();
html代碼
復(fù)制代碼 代碼如下:
<div style="width:100px;height:100px;background:red;text-align:center;line-height:33px;-moz-user-select:none;-khtml-user-select:none;user-select:none">click<br>or<br>dblclick</div>
后續(xù)
文章標(biāo)題里就說了，是不完美的，因?yàn)閣indows下，控制面板里是可以調(diào)鼠標(biāo)的雙擊速度的（其他系統(tǒng)不清楚），所以我設(shè)置系統(tǒng)設(shè)置的雙擊速度較慢，則上面那個demo就不生效了。所以300毫秒只是一個大概的。
作者：胡尐睿
相關(guān)文章
requireJS模塊化實(shí)現(xiàn)返回頂部功能的方法詳解
這篇文章主要介紹了requireJS模塊化實(shí)現(xiàn)返回頂部功能的方法,結(jié)合實(shí)例形式詳細(xì)分析了requireJS的使用步驟及返回頂部功能的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
Vue3基于countUp.js實(shí)現(xiàn)數(shù)字滾動的插件
本文主要介紹了Vue3基于countUp.js實(shí)現(xiàn)數(shù)字滾動的插件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)九宮格拼圖游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
js jquery ajax的幾種用法總結(jié)(及優(yōu)缺點(diǎn)介紹)
本篇文章只要介紹了js jquery ajax的幾種用法總結(jié)(及優(yōu)缺點(diǎn)介紹)，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
JavaScript數(shù)學(xué)對象之?dāng)?shù)字進(jìn)制轉(zhuǎn)換
這篇文章主要為大家講解了JavaScript數(shù)學(xué)對象——數(shù)字進(jìn)制轉(zhuǎn)換的實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
js 模塊化CommonJS AMD UMD CMD ES6規(guī)范詳解
這篇文章主要為大家介紹了js 模塊化CommonJS AMD UMD CMD ES6規(guī)范詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了JS forEach和map方法的用法與區(qū)別,結(jié)合實(shí)例形式分析了forEach和map方法的功能、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
這篇文章主要介紹了JS全局變量和局部變量最新解析的相關(guān)知識，本文給給大家補(bǔ)充js刪除局部變量的代碼，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
javascript代碼優(yōu)化的8點(diǎn)總結(jié)
本篇文章給大家分享了關(guān)于javascript代碼優(yōu)化的8點(diǎn)總結(jié)，希望我們整理的內(nèi)容能夠幫助到大家。2018-01-01
通過js實(shí)現(xiàn)分頁的代碼，一般情況下需要指定頁數(shù)，腳本之家以前也發(fā)布過一些，大家結(jié)合下即可。2010-09-09