js雙擊事件
阿新 • • 發佈：2018-11-05
在開發過程中經常會遇到使用雙擊事件或者避免短時間內連續觸發單擊事件的邏輯。這裡介紹一下對類似問題的處理方法。
一、jquery的dblclick事件
一個DOM元素，如：div，既綁定了 click 事件，又綁定了 dblclick 事件，這兩個事件分別要做獨立的事情。事件處理上沒有衝突，都可以各自 完成各自的操作。雙擊的時候雖然是執行了 dblclick 事件，但是在這之前，也執行了 click 事件
首先，來了解一下點選事件發生的先後順序：
單擊：mousedown, mouseup, click
雙擊：mousedown, mouseup, click, mousedown, mouseup, click, dblclick
由此看來，dblclick 事件發生之前，實際上發生了兩次 click 事件。其中，第一次的 click 是會被遮蔽掉，但是第二次則不會，所以就出現在雙擊的時候，也觸發 click 事件。
解決的方法，可以參考下面的程式碼，用延時的方法實現：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="button">點選我</button>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var 注意：移動手機端不能觸發jQuery的dblclick事件，例如：
<input name="btn1" id="btn1" type="button" value="隨便點">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").on("click", function(){console.log("click")});
$("#btn1").on("dblclick", function(){console.log("dblclick")});
});
</script>二、js仿雙擊事件
我們可以通過判斷兩次單擊間隔時間來模擬dblclick雙擊事件，修改指令碼如下：
<input name="btn1" id="btn1" type="button" value="隨便點">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var touchtime = new Date().getTime();
$("#btn1").on("click", function(){
if( new Date().getTime() - touchtime < 500 ){
console.log("dblclick");
}else{
touchtime = new Date().getTime();
console.log("click")
}
});
});
</script>