js中單擊和雙擊事件的區分
1. 首先要了解鼠標點擊（單擊或雙擊）時包含的事件。
mousedown 事件：
當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生 mousedown 事件。與 click 事件不同，mousedown 事件僅需要按鍵被按下，而不需要鬆開即可發生。
mouseup 事件：
當在元素上放鬆鼠標按鈕時，會發生 mouseup 事件。與 click 事件不同，mouseup 事件僅需要放鬆按鈕。當鼠標指針位於元素上方時，放鬆鼠標按鈕就會觸發該事件。
click（單擊）事件：
當鼠標指針停留在元素上方，然後按下並鬆開鼠標左鍵時，就會發生一次 click。
dblclick（雙擊）事件：
當鼠標指針停留在元素上方，然後按下並鬆開鼠標左鍵時，就會發生一次 click。在很短的時間內發生兩次 click，即是一次 double click 事件。
2. 其次要了解鼠標點擊事件中各個事件的執行順序。
先看個例子：
<html>
<head>
<script type="text/javascript" src="jquery-1.12.1.js"></script>
</head>
<body>
<input type="button" id="testBtn" value="單擊我或者雙擊我">
<script language="javascript">
var a = 0;
$("#testBtn").on("mousedown",function(){
console.log("this is mousedown event");
console.log("a=" + a++);
});
$("#testBtn").on("mouseup",function(){
console.log("this is mouseup event");
console.log("a=" + a++);
});
$("#testBtn").on("click",function(){
console.log("this is click event");
if(a==2){
$("#testBtn").css("background-color","red");
}
if(a==5){
$("#testBtn").css("background-color","green");
}
console.log("a=" + a++);
});
$("#testBtn").on("dblclick",function(){
console.log("this is dblclick event");
console.log("a=" + a++);
});
</script>
</body>
</html>單擊時，以上代碼在瀏覽器控制檯中的輸出結果是：
this is mousedown event
a=0
this is mouseup event
a=1
this is click event
a=2雙擊時，以上代碼在瀏覽器控制檯中的輸出結果是：
this is mousedown event
a=0
this is mouseup event
a=1
this is click event
a=2
this is mousedown event
a=3
this is mouseup event
a=4
this is click event
a=5
this is dblclick event
a=6從輸出結果中我們可以看到，鼠標點擊事件中各個事件的執行順序是：
單擊（click）: mousedown，mouseup，click；
雙擊（dbclick）： mousedown，mouseup，click，mousedown，mouseup，click，dblclick 。同時，從a的結果和按鈕的背景顏色變化來看：
1. 從背景顏色的最終顏色來看，第一次單擊事件被覆蓋了，並不是被屏蔽或阻止了。
2. 從a的值變化來看，雙擊事件中的兩次單擊事件代碼都執行了，而且a的值一直在增長。3. 如何區分單擊和雙擊事件
從以上的分析來看，只要我們能把雙擊事件中的前兩次單擊事件清除掉，那就只剩下雙擊事件了（若想去除重複的mousedown和mouseup事件，可用同樣的方法）。
利用setTimeout和clearTimeout來實現對事件的清除。
對上面的例子進行如下修改：
<html>
<head>
<script type="text/javascript" src="jquery-1.12.1.js"></script>
</head>
<body>
<input type="button" id="testBtn" value="單擊我或者雙擊我">
<script language="javascript">
var a = 0;
var timeoutID= null;
$("#testBtn").on("mousedown",function(){
console.log("this is mousedown event");
console.log("a=" + a++);
});
$("#testBtn").on("mouseup",function(){
console.log("this is mouseup event");
console.log("a=" + a++);
});
$("#testBtn").on("click",function(){
clearTimeout(timeoutID);
timeoutID= window.setTimeout(function(){
console.log("this is click event");
if(a==2){
$("#testBtn").css("background-color","red");
}
if(a==5){
$("#testBtn").css("background-color","green");
}
console.log("a=" + a++);
}, 200);
});
$("#testBtn").on("dblclick",function(){
clearTimeout(timeoutID);
console.log("this is dblclick event");
console.log("a=" + a++);
});
</script>
</body>
</html>以上代碼在瀏覽器控制檯中的輸出結果是：
this is mousedown event
a=0
this is mouseup event
a=1
this is mousedown event
a=2
this is mouseup event
a=3
this is dblclick event
a=4關鍵點分析：
setTimeout事件中的延遲時間（單位爲毫秒）和clearTimeout事件。（欲知該延遲時間的確定可以查看下一篇文章）
歸總：
爲了區分單擊和雙擊事件，稍微延遲單擊事件中的實際動作（單擊後的實際想做的change），利用setTimeout使其延時，讓程序繼續往下走，然後在程序進入dblclick 事件時，利用clearTimeout來刪除仍在等待中的響應事件（setTimeout設定的延時響應事件，即單擊後的實際響應事件），如此便區分開了單擊和雙擊事件。