js双击事件

在开发过程中经常会遇到使用双击事件或者避免短时间内连续触发单击事件的逻辑。这里介绍一下对类似问题的处理方法。

一、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 timer=null;
    $('button').addEventListener('click',function(e){
      clearTimeout(timer);
      timer=setTimeout(function(){//初始化一个延时
        console.log("1");
        // console.log(e);
      },250)
    },false);
    $('button').addEventListener('dblclick',function(){//双击事件会先触发两次单击事件，然后再执行双击事件，使用清除定时器来达到双击只执行双击事件的目的
      clearTimeout(timer);
      console.log("2");
    },false);
  </script>
</body>
</html>

注意：移动手机端不能触发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>

一、jquery的dblclick事件

二、js仿双击事件

猜你喜欢