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


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 22 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
Angular的事件和表单详解
Dec 26 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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常用image图像函数集
2013/06/24 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python简易版停车管理系统
2019/08/12 Python
使用python求解二次规划的问题
2020/02/29 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
复古服装:RetroStage
2019/05/10 全球购物
大专计算机个人求职的自我评价
2013/10/21 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
房屋租赁协议书
2014/04/10 职场文书
会议室标语
2014/06/21 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
导游词之介休绵山
2019/12/31 职场文书
Python中的 Set 与 dict
2022/03/13 Python
python中的sys模块和os模块
2022/03/20 Python
Python OpenCV超详细讲解基本功能
2022/04/02 Python
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫