js不完美解决click和dblclick事件冲突问题


Posted in Javascript onJuly 16, 2012

情况描述

当某个元素,如:div,同时绑定了click事件和dblclick事件,而这两个事件又要处理相对独立的业务,也就是click的时候不能触发dblclick,dblclick的时候不能触发click。在实际测试中发现,当dblclick的时候,总会出现1次click。下文将要解决的就是这个问题。
情况分析

首先我们要清楚click和dblclick的执行顺序,测试过程略,下面是测试结果:

click:mousedown -- mouseup -- click

dblclick:mousedown -- mouseup -- click -- mousedown -- mouseup -- click -- dblclick

由此看来,在dblclick触发之前,实际上是执行了2次click,而第一次的click是会屏蔽掉的(为什么?好把,我也不知道)。
解决方案

最先想到的是否可以停止事件,但发现浏览器并未提供相应方法,如果自己去实现难度太大,因为单击事件所关联的行为必须做成是可以被cancel的才行。

于是考虑用延迟,也是我唯一能想到的解决办法,利用setTimeout()来延迟完成click事件的处理,然后在需要屏蔽click的时候用clearTimeout()来停止。
具体代码

var test = (function(){ 
var clickText = 'click<br>'; 
var dblclickText = 'dblclick<br>'; 
var timer = null; 
return { 
click: function(){ 
clearTimeout(timer); 
timer = setTimeout(function(){ 
$('body').append(clickText); 
}, 300); 
}, 
dblclick: function(){ 
clearTimeout(timer); 
$('body').append(dblclickText); 
}, 
init: function(){ 
$(function(){ 
$('div').click(test.click).dblclick(test.dblclick); 
}); 
} 
} 
})(); 
test.init();

html代码
<div style="width:100px;height:100px;background:red;text-align:center;line-height:33px;-moz-user-select:none;-khtml-user-select:none;user-select:none">click<br>or<br>dblclick</div>

后续

文章标题里就说了,是不完美的,因为windows下,控制面板里是可以调鼠标的双击速度的(其他系统不清楚),所以我设置系统设置的双击速度较慢,则上面那个demo就不生效了。所以300毫秒只是一个大概的。
作者:胡??

Javascript 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
图解js图片轮播效果
Dec 20 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
js jquery数组介绍
Jul 15 #Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 #Javascript
基于jquery的图片幻灯展示源码
Jul 15 #Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 #Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 #Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 #Javascript
jQuery Tools tab(幻灯片)
Jul 14 #Javascript
You might like
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
Python中的pack和unpack的使用
2018/03/12 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python 搜索大文件的实例代码
2019/07/08 Python
python tkinter组件使用详解
2019/09/16 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
软件测试题目
2013/02/27 面试题
大学生求职简历的自我评价范文
2013/10/12 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
建筑安全标语
2014/06/07 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
导游词400字
2015/02/13 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
Java实现多线程聊天室
2021/06/26 Java/Android
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS