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


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模拟select下拉菜单控件的代码
May 08 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
vue实现虚拟列表功能的代码
Jul 28 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 strtok()函数的优点分析
2010/03/02 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python执行时间的计算方法小结
2017/03/17 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
python word转pdf代码实例
2019/08/16 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
人力资源管理专业求职信
2014/07/23 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
实习协议书范本
2014/09/25 职场文书
辩论会主持词
2015/07/03 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang