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 相关文章推荐
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python编程中的反模式实例分析
2014/12/08 Python
Python编程之属性和方法实例详解
2015/05/19 Python
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
中专自荐信
2013/10/13 职场文书
党员思想汇报范文
2013/12/30 职场文书
教师新年寄语
2014/04/03 职场文书
高考励志标语
2014/06/05 职场文书
2014年司法所工作总结
2014/11/22 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
python实现三次密码验证的示例
2021/04/29 Python
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
关于的python五子棋的算法
2022/05/02 Python
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技