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


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 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
Jquery之美中不足小结
Feb 16 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
在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判断文件夹是否存在不存在则创建
2015/04/09 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
javascript 面向对象编程基础 多态
2009/08/21 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
浅析return false的正确使用
2013/11/04 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
Python中的闭包实例详解
2014/08/29 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
python中删除某个元素的方法解析
2019/11/05 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
给校长的建议书500字
2014/05/15 职场文书
五年级学生期末评语
2014/12/26 职场文书