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 DOM操作 基于命令改变页面
May 06 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
javascript页面倒计时实例
Jul 25 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
ES6中数组array新增方法实例总结
2017/11/07 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
flask入门之文件上传与邮件发送示例
2018/07/18 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
计算机专业推荐信范文
2013/11/27 职场文书
聘用意向书范本
2014/04/01 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
入党后的感想
2015/08/10 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫