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


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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Series和DataFrame使用简单入门
2019/11/13 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
python如何查看网页代码
2020/06/07 Python
python主要用于哪些方向
2020/07/05 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
计算机专业毕业生的自我评价
2013/11/18 职场文书
工厂厂长的职责
2013/12/12 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
教师年终个人总结
2015/02/11 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers