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


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中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
node中koa中间件机制详解
Aug 22 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
node打造微信个人号机器人的方法示例
Apr 26 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
Vue函数式组件的应用实例详解
Aug 30 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 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的正则处理函数总结分析
2008/06/20 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
汽车专业求职信
2014/06/05 职场文书
董事长秘书工作总结
2015/08/14 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书