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 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
Javascript 命名空间模式
Nov 01 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
Vue实现导航栏的显示开关控制
Nov 01 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
MySql中正则表达式的使用方法描述
2008/07/30 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
Python中return函数返回值实例用法
2020/11/19 Python
python tqdm库的使用
2020/11/30 Python
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
ORACLE第二个十问
2013/12/14 面试题
优秀导游先进事迹材料
2014/01/25 职场文书
酒店经理职责
2014/01/30 职场文书
社区工作感言
2014/02/21 职场文书
学校2014年度工作总结
2014/12/06 职场文书
交通事故调解协议书
2015/05/20 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
Go获取两个时区的时间差
2022/04/20 Golang