首頁 > web前端 > js教程 > js不完美解決click和dblclick事件衝突問題_javascript技巧

js不完美解決click和dblclick事件衝突問題_javascript技巧

WBOY
發布: 2016-05-16 17:51:48
原創
1202 人瀏覽過

狀況描述
  當某個元素,如:div,同時綁定了click事件和dblclick事件,而這兩個事件又要處理相對獨立的業務,也就是click的時候不能觸發dblclick,dblclick的時候不能觸發click。在實際測試中發現,當dblclick的時候,總是會出現1次click。下文將要解決的就是這個問題。
情況分析
  首先我們要清楚click和dblclick的執行順序,測試過程略,以下是測試結果:
  click:mousedown -- mouseup -- click
  dblclicklick? - click -- mousedown -- mouseup -- click -- dblclick
  由此看來,在dblclick觸發之前,實際上是執行了2次click,而第一次的click是會屏蔽掉的(為什麼?好把,我也不知道)。
解決方案
  最先想到的是否可以停止事件,但發現瀏覽器並未提供相應方法,如果自己去實現難度太大,因為單擊事件所關聯的行為必須做成是可以被cancel的才行。
  於是考慮用延遲,也是我唯一能想到的解決辦法,利用setTimeout()來延遲完成click事件的處理,然後在需要屏蔽click的時候用clearTimeout()來停止。
具體程式碼

複製程式碼 程式碼如下:

var test = (function() {
var clickText = 'click
';
var dblclickText = 'dblclick
';
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程式碼
複製程式碼 程式碼🎜>
click
or
dblclick


後續
  文章標題裡就說了,是不完美的,因為windows下,控制面板裡是可以調滑鼠的雙擊速度的(其他系統不清楚),所以我設定係統設定的雙擊速度較慢,則上面那個demo就不生效了。所以300毫秒只是一個大概的。
作者:胡尐睿
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板