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 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
Javascript倒计时代码
Aug 12 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
浅析vue-router原理
Oct 19 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 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
PHP clearstatcache()函数详解
2010/03/02 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
PHP实现搜索相似图片
2015/09/22 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
得到form下的所有的input的js代码
2013/11/07 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
Python制作简单的网页爬虫
2015/11/22 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Python3.6简单反射操作示例
2018/06/14 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
ipython和python区别详解
2019/06/26 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
python定义类self用法实例解析
2020/01/22 Python
python实现FTP循环上传文件
2020/03/20 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
信息管理员岗位职责
2013/12/01 职场文书
户外活动策划方案
2014/03/12 职场文书
乔迁之喜主持词
2014/03/27 职场文书
化工专业求职信
2014/07/01 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
学生偷窃检讨书
2014/09/25 职场文书
银行竞聘报告范文
2014/11/06 职场文书
金砖之国观后感
2015/06/11 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis