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


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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
动态加载js文件简单示例
Apr 21 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 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 无限级 SelectTree 类
2009/05/19 PHP
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
python多线程操作实例
2014/11/21 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
中科前程Java笔试题
2016/11/20 面试题
教师批评与自我批评
2014/10/15 职场文书
2014年党支部工作总结
2014/11/13 职场文书
2014年会计工作总结
2014/11/27 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android