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


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 学习笔记一些小技巧
Mar 28 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
javaScript中的空值和假值
Dec 18 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
使用console进行性能测试
2015/04/27 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
JSON 数据格式详解
2017/09/13 Javascript
详解javascript void(0)
2020/07/13 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
python中的多线程实例教程
2014/08/27 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
python opencv之分水岭算法示例
2018/02/24 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
python多进程间通信代码实例
2019/09/30 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Python的信号库Blinker用法详解
2020/12/31 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
微信营销策划方案
2014/02/24 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
毕业论文致谢范文
2015/05/14 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
Python anaconda安装库命令详解
2021/10/16 Python