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


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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php全排列递归算法代码
2012/10/09 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
巧用canvas
2017/01/21 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
总经理秘书工作职责
2013/12/26 职场文书
写给女朋友的道歉信
2014/01/08 职场文书
卫生安全检查制度
2014/02/04 职场文书
教师考察材料范文
2014/06/03 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
限期整改通知书
2015/04/22 职场文书
导游词之杭州西湖
2019/09/19 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
MySQL创建管理LIST分区
2022/04/13 MySQL