js中单击和双击事件的区分

原创 2017年01月03日 16:58:52

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设定的延时响应事件,即单击后的实际响应事件),如此便区分开了单击和双击事件。

版权声明:本文为博主原创文章,未经博主允许不得转载。

js(javascript) onclick与ondblclick 单击与双击事件

js 单击时间为:onclick 双击事件为:ondblclick 如下是一个演示,想必很清楚,复制代码运行一下就懂了: function ondblclick_f(){ ...
  • A757291228
  • A757291228
  • 2017年03月07日 21:14
  • 4305

js判断鼠标单击或者双击事件

单击事件是指鼠标发生一次点击事件,经历了onmousedown,onmouseup,onclick的过程;双击事件是指鼠标连续在同一位置连续点击两次,经历了onmousedown,onmouseup,...
  • shenmill
  • shenmill
  • 2017年02月23日 00:55
  • 4816

IOS OC获取jS中的点击事件方法

IOS  OC获取jS中的点击事件方法 1.  获取JS上下文环境 _jsContext = [_ljWebView valueForKeyPath:@"documentView.webVie...
  • robinson_911
  • robinson_911
  • 2016年11月10日 18:04
  • 3164

js 同时实现单击事件和双击事件

var time = null; //单击事件 function click(){ //取消上次延时未执行的方法 clearTimeout(time); //设置延时300ms time = ...
  • lwj734114646
  • lwj734114646
  • 2016年10月24日 15:12
  • 2100

解决JS双击事件dblclick触发时,同时会执行click事件中的语句

双击dblclick事件,同时会执行click事件中的语句,当需要为一个元素同时添加这两个事件时,显然这不是我们想要的结果,举个实例,在最近做的canvas开发中使用鼠标画区域,鼠标单击一下开始画,鼠...
  • qq_21794603
  • qq_21794603
  • 2017年05月18日 10:56
  • 1336

javascript 鼠标单击和双击事件并存的实现方法

http://www.jbxue.com/article/8033.html 本文介绍下实现javascript鼠标单击与双击事件并存的方法,经常需要为一个链接注册双击事件,或让一个按钮或者其他元素...
  • Quincylk
  • Quincylk
  • 2014年08月14日 16:19
  • 22055

JS单击与双击事件共存

一直都认为在Web开发中,双击事件都是少至又少地使用,直到最近项目需要,要在一个按钮上绑定单击与双击两件事件。开始也觉得不就是给按钮绑下两个事件而已罢了……只是后来才明白,是我想得太简单,在双击事件触...
  • kenny0613
  • kenny0613
  • 2011年05月25日 13:58
  • 8589

js判断鼠标双击单击

Click   Me 因为项目需要,今天研究了下单击和双击事件的属性,这个属性在应用的过程中,总是会先触发click事件,在函数的外围无法捕捉到dbouleclick事件所以,想要在doublecl...
  • wyqlxy
  • wyqlxy
  • 2010年12月15日 17:22
  • 9001

单击事件和双击事件同时存在的处理办法

原始的ondblclick方法在执行完两次onclick方法后执行。所以,如果用该方法,则在click事件中要判断是否是因为双击事件触发的,一般的方法通过setTimeout,即click方法内的代码...
  • casuallc
  • casuallc
  • 2016年01月17日 11:21
  • 2896

iOS开发笔记--识别单击还是双击

在视图上同时识别单击手势和双击手势的问题在于,当检测到一个单击操作时,无法确定是确实是一个单击操作或者只是双击操作中的第一次点击。解决这个问题的方法就是:在检测到单击时,需要等一段时间等待第二次点击,...
  • hopedark
  • hopedark
  • 2013年12月27日 10:49
  • 11154
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js中单击和双击事件的区分
举报原因:
原因补充:

(最多只允许输入30个字)