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


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获取url参数的使用扩展实例
Dec 29 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
Vue 表单控件绑定的实现示例
Aug 11 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
laravel-admin的图片删除实例
2019/09/30 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
accesskey 提交
2006/06/26 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
深入理解node.js http模块
2018/01/24 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
python中尾递归用法实例详解
2015/04/28 Python
Python的Django框架安装全攻略
2015/07/15 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
Python partial函数原理及用法解析
2019/12/11 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
质量月活动策划方案
2014/03/10 职场文书
超市中秋节促销方案
2014/03/21 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
家庭贫困证明
2014/09/23 职场文书
劳模先进事迹材料
2014/12/24 职场文书
收费员岗位职责
2015/02/14 职场文书
2015年领班工作总结
2015/04/29 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
Java spring定时任务详解
2021/10/05 Java/Android