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


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现实多行信息
Aug 26 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
详解JS数组方法
Nov 20 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下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
python实现最大优先队列
2019/08/29 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
校园报刊亭创业计划书
2014/01/02 职场文书
校园广播稿500字
2014/02/04 职场文书
政府门卫岗位职责
2014/04/29 职场文书
幼儿园标语大全
2014/06/19 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
地震慰问信
2015/02/14 职场文书
求职信范文怎么写
2015/03/19 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
初中物理教学反思
2016/02/19 职场文书
导游词之西递宏村
2019/12/10 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
Python之matplotlib绘制折线图
2022/04/13 Python