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


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 相关文章推荐
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
jQuery选择器实例应用
Jan 05 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 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
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
php 验证码实例代码
2010/06/01 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
PHP反射机制用法实例
2014/08/28 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Python子类继承父类构造函数详解
2019/02/19 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
什么是TCP/IP
2014/07/27 面试题
超市业务员岗位职责
2013/12/05 职场文书
教师暑期培训感言
2014/08/15 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书