单击和双击事件的冲突处理示例代码


Posted in Javascript onApril 03, 2014

先上代码:

<head> 
<title></title> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
$(function () { 
$("div").bind("click.a", function () { //单击事件 
$("body").append("<p>click事件</p>"); 
}) 
$("div").bind("dblclick.a", function () { //双击事件 
$("body").append("<p>dblclick事件</p>"); 
}) 
$("div").bind("mouseover.a", function () { //鼠标经过元素的事件 
$("body").append("<p>mouseover事件</p>"); 
}) 
$("div").bind("mouseout.a", function () { //鼠标移出元素的事件 
$("body").append("<p>mouseout事件</p>"); 
}) 
}) 
</script> 
</head> 
<body> 
<div>jQuery命名空间</div> 
</body>

效果如图所示,我双击的同时,会先触发两个单击事件,这是怎么回事?还有,如果我不想在双击的时候触发

单击事件,而仅仅只是触发双击事件,那该怎么解决?我也有试过在双击的时候,先把单击事件解绑,

可这样一来,单击事件又不能用了。。。

单击和双击事件的冲突处理示例代码 

后来在论坛问别人,终于有了答案。那就是使用setTimeout()这个方法设置单击事件的时间间隔,这个时间间隔一般
设为300ms,这样在双击的时候,由于双击的时间间隔小于300ms,所以就不会产生click事件,而仅仅只是产生
dblclick事件。在双击事件里面,需要用clearTimeout()函数清除click事件的处理。代码如下:

<script type="text/javascript" language="javascript"> 
$(function () { 
var timer = null; 
$("div").bind("click.a", function () { //单击事件 
clearTimeout(timer); 
timer = setTimeout(function () { //在单击事件中添加一个setTimeout()函数,设置单击事件触发的时间间隔 
$("body").append("<p>click事件</p>"); 
}, 300); }) 
$("div").bind("dblclick.a", function () { //双击事件 
clearTimeout(timer); //在双击事件中,先清除前面click事件的时间处理 
$("body").append("<p>dblclick事件</p>"); 
}) 
$("div").bind("mouseover.a", function () { //鼠标经过元素的事件 
$("body").append("<p>mouseover事件</p>"); 
}) 
$("div").bind("mouseout.a", function () { //鼠标移出元素的事件 
$("body").append("<p>mouseout事件</p>"); 
}) 
}) 
</script>

如此,这个问题就解决了!
Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
javascript封装简单实现方法
Aug 11 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
Javascript缓存API
Jun 14 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
微信小程序之购物车功能
Sep 23 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 #Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 #Javascript
JS获取网页属性包括宽、高等等
Apr 03 #Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 #Javascript
js实现的复制兼容chrome和IE
Apr 03 #Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 #Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 #Javascript
You might like
解决GD中文乱码问题
2007/02/14 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
php读取本地json文件的实例
2018/03/07 PHP
php和nginx交互实例讲解
2019/09/24 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
vue实现文件上传功能
2018/08/13 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
Python生成器以及应用实例解析
2018/02/08 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
车间班长岗位职责
2013/11/30 职场文书
内勤主管岗位职责
2014/04/03 职场文书
六年级小学生评语
2014/12/26 职场文书
学校标语口号大全
2015/12/26 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
python中 Flask Web 表单的使用方法
2022/05/20 Python