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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
jQuery 工具函数学习资料
Apr 29 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
bootstrap table实例详解
Jan 06 Javascript
AngularJS表单验证功能
Oct 19 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
javascript 闭包疑问
2010/12/30 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
项目工作说明书
2014/07/29 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
学校运动会广播稿
2014/10/11 职场文书
十岁生日答谢词
2015/01/05 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
导游词范文
2015/02/13 职场文书
初中军训感想
2015/08/07 职场文书
高中语文教学反思范文
2016/02/16 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python