快捷導(dǎo)航

js不完美解決click和dblclick事件沖突問題

更新時(shí)間：2012年07月16日 01:16:18 作者：

當(dāng)某個(gè)元素，如：div，同時(shí)綁定了click事件和dblclick事件，而這兩個(gè)事件又要處理相對獨(dú)立的業(yè)務(wù)，也就是click的時(shí)候不能觸發(fā)dblclick，dblclick的時(shí)候不能觸發(fā)click

情況描述
　　當(dāng)某個(gè)元素，如：div，同時(shí)綁定了click事件和dblclick事件，而這兩個(gè)事件又要處理相對獨(dú)立的業(yè)務(wù)，也就是click的時(shí)候不能觸發(fā)dblclick，dblclick的時(shí)候不能觸發(fā)click。在實(shí)際測試中發(fā)現(xiàn)，當(dāng)dblclick的時(shí)候，總會(huì)出現(xiàn)1次click。下文將要解決的就是這個(gè)問題。
情況分析
　　首先我們要清楚click和dblclick的執(zhí)行順序，測試過程略，下面是測試結(jié)果：
　　click：mousedown -- mouseup -- click
　　dblclick：mousedown -- mouseup -- click -- mousedown -- mouseup -- click -- dblclick
　　由此看來，在dblclick觸發(fā)之前，實(shí)際上是執(zhí)行了2次click，而第一次的click是會(huì)屏蔽掉的（為什么？好把，我也不知道）。
解決方案
　　最先想到的是否可以停止事件，但發(fā)現(xiàn)瀏覽器并未提供相應(yīng)方法，如果自己去實(shí)現(xiàn)難度太大，因?yàn)閱螕羰录P(guān)聯(lián)的行為必須做成是可以被cancel的才行。
　　于是考慮用延遲，也是我唯一能想到的解決辦法，利用setTimeout()來延遲完成click事件的處理，然后在需要屏蔽click的時(shí)候用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è)置的雙擊速度較慢，則上面那個(gè)demo就不生效了。所以300毫秒只是一個(gè)大概的。
作者：胡尐睿

您可能感興趣的文章: