js中单击和双击事件的区分
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中单击和双击事件的区分相关推荐
- Qt中鼠标的双击事件和单击事件的实现方式
背景 同一个部件既要响应鼠标单击事件又要响应双击事件,而且两者响应的动作没有交集,跟不存在包含关系(如果双击事件动作包含单击事件的动作,那么只需要将双击事件特有的部分放到mouseDoubleClic ...
- JS - 解决鼠标单击、双击事件冲突问题(原生js实现)
由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次双击事件,原生的js不提供专门的双击事件. 因为业务原因,双击和单机都绑定了不同的业务,在双击的时候又触发了单机,影响了页面的正常显示 出现问 ...
- javascript 鼠标单击和双击事件并存的实现方法
http://www.jbxue.com/article/8033.html 本文介绍下实现javascript鼠标单击与双击事件并存的方法,经常需要为一个链接注册双击事件,或让一个按钮或者其他元素上 ...
- GridView中列表的“双击事件”
GridView中列表的"双击事件" 模拟事例: 双击列表中的行弹出该行的详细信息 解决方案: 为每一行添加一个双击事件 为列表所在的区域添加双击事件 为列表所在的区域添加Mous ...
- 禁用CMFCRibbonApplicationButton的单击和双击事件
为了禁用CMFCRibbonApplicationButton的单击和双击事件,我重载了CMFCRibbonApplicationButton如下: 1. MyRibbonApplicationBut ...
- element-ui中tree组件双击事件的实现
文章目录 前言 代码实现 总结 前言 近期,笔者项目中遇到一个需求:实现左侧设备树(基于elment-ui tree组件)双击事件.查看element-ui官网后发现,element-ui中tree组 ...
- GridView/DataGrid行单击和双击事件实现代码_.Net教程
功能: 单击选中行,双击打开详细页面 说明:单击事件(onclick)使用了 setTimeout 延迟,根据实际需要修改延迟时间 ;当双击时,通过全局变量 dbl_click 来取消单击事件的响应 ...
- ASPxGridView1单击,双击事件
ASPxGridView1没有自带的单击,双击事件,所以要自己写,<script language="javascript" type="text/javascri ...
- pyQt5中单击、双击、拖动事件区分
一般在处理单击.双击.拖动事件时会遇到以下问题: 双击时会产生两个额外的单击事件和两个释放事件 拖动时会在拖动开始处产生一个单击事件,在拖动结束时产生一个释放事件 故采用signal作为事件类型的标志 ...
最新文章
- 数组名与数组指针的关系
- 分析师分析业务维度,(个人制作分析思维导图Xmind)
- 异常--自定义异常类
- “AI+遥感”产品研究现状
- 搭建kafaka集群
- 0018计算机应用基础国考考试大纲,《计算机应用基础》考试大纲
- 如果计算机正执行屏幕保护程序 当用户,计算机一级考试参考试题(含答案)篇篇一.doc...
- Node.js中运行JavaScript代码
- linux驱动开发架构
- centOS 手动部署 wekan
- android与后台交互,Android客户端与服务端交互
- android 读写sd权限,android 读写sd卡的权限设置
- php猜拳,JavaScript面向对象实现猜拳游戏
- 阿里云添加域名解析设置
- 用迭代法求某数a的平方根
- 《水经注地图服务》缓存管理说明
- 怎么用金蝶kis记账王修改会计期间
- 我的世界未能从服务器注册表数据,【经验之谈】“User Profile Service 服务未能登录,无法加载用户配置文件”实战历程...
- Unity3D中Rigidbody.velocity和Addforce的区别
- 如何用java判断手机号运营商?