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

情況描述

　　當某個元素，如：div，同時綁定了click事件和dblclick事件，而這兩個事件又要處理相對獨立的業務，也就是click的時候不能觸發dblclick，dblclick的時候不能觸發click。在實際測試中發現，當dblclick的時候，總會出現1次click。下文將要解決的就是這個問題。

情況分析

　　首先我們要清楚click和dblclick的執行順序，測試過程略，下面是測試結果：

　　click：mousedown -- mouseup -- click

　　dblclick：mousedown -- mouseup -- click -- mousedown -- mouseup -- click -- dblclick

　　由此看來，在dblclick觸發之前，實際上是執行了2次click，而第一次的click是會屏蔽掉的（為什么？好把，我也不知道）。

解決方案

　　最先想到的是否可以停止事件，但發現瀏覽器並未提供相應方法，如果自己去實現難度太大，因為單擊事件所關聯的行為必須做成是可以被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();

<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>

演示

后續

　　文章標題里就說了，是不完美的，因為windows下，控制面板里是可以調鼠標的雙擊速度的（其他系統不清楚），所以我設置系統設置的雙擊速度較慢，則上面那個demo就不生效了。所以300毫秒只是一個大概的。