jquery双击事件

最新推荐文章于 2024-06-28 13:55:12 发布

语记时光

最新推荐文章于 2024-06-28 13:55:12 发布

阅读量3.7w

点赞数 2

分类专栏：技术分享文章标签： javascript

原文链接：https://blog.csdn.net/qq_30868289/article/details/79484322

版权

技术分享专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

####一、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>

语记时光

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
4
评论
jquery双击事件

在开发过程中经常会遇到使用双击事件或者避免短时间内连续触发单击事件的逻辑。这里介绍一下对类似问题的处理方法。一、jquery的dblclick事件一个DOM元素，如：div，既绑定了 click 事件，又绑定了 dblclick 事件，这两个事件分别要做独立的事情。事件处理上没有冲突，都可以各自完成各自的操作。双击的时候虽然是执行了 dblclick 事件，但是在这之前，也执行了 ...
复制链接

扫一扫

专栏目录