js jq 单击和双击区分示例介绍


Posted in Javascript onNovember 05, 2013

一:原理:

先看一下点击事件的执行顺序:

单击(click):mousedown,mouseout,click;
双击(dblclick):mousedown,mouseout,click , mousedown,mouseout,click,dblclick;

在双击事件(dblclick),触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会。也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。

如此这般的话,只需消灭掉多余的一次单击事件(click),这个问题就解决了。

setTimeout

二:代码:

//定义setTimeout执行方法 
var TimeFn = null; $('div').click(function () { 
// 取消上次延时未执行的方法 
clearTimeout(TimeFn); 
//执行延时 
TimeFn = setTimeout(function(){ 
//do function在此处写单击事件要执行的代码 
},300); 
}); 
$('div').dblclick(functin () { 
// 取消上次延时未执行的方法 
clearTimeout(TimeFn); 
//双击事件的执行代码 
})
Javascript 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
很可爱的输入框
Aug 03 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 #Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 #Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 #Javascript
js截取字符串的两种方法及区别详解
Nov 05 #Javascript
js实现在字符串中提取数字
Nov 05 #Javascript
提取字符串中年月日的函数代码
Nov 05 #Javascript
纯js分页代码(简洁实用)
Nov 05 #Javascript
You might like
我常用的几个类
2006/10/09 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
JAVA代码查错题
2014/10/10 面试题
外贸业务员求职信范文
2013/12/12 职场文书
教师评优事迹材料
2014/01/10 职场文书
保护黄河倡议书
2014/05/16 职场文书
主题党日活动总结
2014/07/08 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
个人专业技术总结
2015/03/05 职场文书
项目投资意向书范本
2015/05/09 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
《青山不老》教学反思
2016/02/22 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL