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 22 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 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中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
js html实现计算器功能
2018/11/13 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
python的依赖管理的实现
2019/05/14 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
python读写csv文件的方法
2019/08/13 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
技术合作协议书范本
2014/04/18 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
大型会议策划方案
2014/05/17 职场文书
学术诚信承诺书
2014/05/26 职场文书
公务员培的训心得体会
2014/09/01 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
2014年材料员工作总结
2014/11/19 职场文书
医院志愿者活动总结
2015/05/06 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers