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 iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
jQuery is()函数用法3例
May 06 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
实例分析js事件循环机制
Dec 13 Javascript
vuex进阶知识点巩固
May 20 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 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
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
javascript常用的方法整理
2015/08/20 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
基于Python List的赋值方法
2018/06/23 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python多线程同步之文件读写控制
2021/02/25 Python
python、Matlab求定积分的实现
2019/11/20 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Python selenium自动化测试模型图解
2020/04/15 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
更夫岗位责任制
2014/02/11 职场文书
小学毕业感言300字
2014/02/19 职场文书
护理中职生求职信范文
2014/02/24 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
初三毕业感言
2015/07/31 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL