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


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下字符串连接的性能
Mar 05 Javascript
js中switch case循环实例代码
Dec 30 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
JS路由跳转的简单实现代码
Sep 21 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 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中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
PHP7.0版本备注
2015/07/23 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
公司活动方案范文
2014/03/06 职场文书
迁户口计划生育证明
2014/10/19 职场文书
2015年派出所工作总结
2015/04/24 职场文书
团拜会主持词
2015/07/04 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL