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 相关文章推荐
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
JS求解两数之和算法详解
Apr 28 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
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
PHP7匿名类用法分析
2016/09/26 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
Jquery选中或取消radio示例
2013/09/29 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
layui实现下拉框三级联动
2019/07/26 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
在漏洞利用Python代码真的很爽
2007/08/26 Python
python list转dict示例分享
2014/01/28 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
实习生个人找工作的自我评价
2013/10/30 职场文书
小学教师国培感言
2014/02/08 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
项目经理任命书范本
2014/06/05 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript