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


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 实现双色表格实现代码
Nov 24 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
深入理解js中的加载事件
Feb 08 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
js实现表格数据搜索
Aug 09 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截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
python能做哪方面的工作
2020/06/15 Python
python爬取代理ip的示例
2020/12/18 Python
上海奥佳笔试题面试题
2016/11/16 面试题
女大学生毕业找工作的自我评价
2013/10/03 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
党员服务承诺书
2014/05/28 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
导游欢送词
2015/01/31 职场文书
python pygame入门教程
2021/06/01 Python
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis