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


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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
微信小程序中使用vant框架的具体步骤
Feb 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 和 MySQL 基础教程(一)
2006/10/09 PHP
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
dedecms中使用php语句指南
2014/11/13 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
详解YII关联查询
2016/01/10 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
Python函数生成器原理及使用详解
2020/03/12 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
大学生护理专业自荐信
2013/10/03 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
论语读书笔记
2015/06/26 职场文书
干部考核工作总结2015
2015/07/24 职场文书
配置nginx负载均衡
2022/05/06 Servers