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


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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
常用PHP框架功能对照表
2014/10/23 PHP
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
计算机专业毕业生自荐信
2013/12/31 职场文书
春节超市活动方案
2014/08/14 职场文书
老人节标语大全
2014/10/08 职场文书
鸟的天堂导游词
2015/01/31 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
导游词之西递宏村
2019/12/10 职场文书
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
DE1103使用报告
2022/04/05 无线电