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


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 相关文章推荐
仿百度的关键词匹配搜索示例
Sep 25 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
vue 文件目录结构详解
Nov 24 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 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作为Shell脚本语言使用
2006/10/09 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
js实现日历与定时器
2017/02/22 Javascript
js简易版购物车功能
2017/06/17 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
vue实现登录功能
2020/12/31 Vue.js
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现二分查找算法实例
2015/05/26 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
保险公司晨会主持词
2014/03/22 职场文书
停车场管理协议书范本
2014/10/08 职场文书
2016春节放假通知范文
2015/08/18 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
Golang jwt身份认证
2022/04/20 Golang