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 相关文章推荐
javascript不同页面传值的改进版
Sep 30 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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 CURL用法的深入分析
2013/06/09 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
python中Switch/Case实现的示例代码
2017/11/09 Python
简单了解python反射机制的一些知识
2019/07/13 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
什么是Rollback Segment
2013/04/22 面试题
.NET程序员的数据库面试题
2012/10/10 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
如何客观的进行自我评价
2013/12/17 职场文书
团日活动总结模板
2014/06/25 职场文书
青年志愿者活动方案
2014/08/17 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
党支部审查意见
2015/06/02 职场文书
孝女彩金观后感
2015/06/10 职场文书
SQLServer常见数学函数梳理总结
2022/08/05 MySQL