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


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代码
Jan 01 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 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
PHP:风雨欲来 路在何方?
2006/10/09 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
js实现计算器功能
2020/08/10 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Python插件机制实现详解
2020/05/04 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
JS原生实现轮播图的几种方法
2021/03/23 Javascript
生产副总岗位职责
2013/11/28 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
教师师德承诺书
2014/03/26 职场文书
优秀团员个人总结
2015/02/26 职场文书
django上传文件的三种方式
2021/04/29 Python
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏