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获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
Three.js实现雪糕地球的使用示例详解
Jul 07 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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
php 面向对象的一个例子
2011/04/12 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
js简单时间比较的方法
2016/08/02 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python之wxPython应用实例
2014/09/28 Python
Python修改MP3文件的方法
2015/06/15 Python
基于python实现聊天室程序
2018/07/27 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
档案管理员岗位职责
2013/12/01 职场文书
入党自我评价优缺点
2014/01/25 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书