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


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/jquery对上传文件格式过滤的方法
Jul 25 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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
4.与数据库的连接
2006/10/09 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
Apache部署Django项目图文详解
2019/07/30 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
详解python中各种文件打开模式
2020/01/19 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
摄影专业毕业生求职信
2014/08/05 职场文书
检讨书怎么写
2015/01/23 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书