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


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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
基于datagrid框架的查询
Apr 08 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 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
微信access_token的获取开发示例
2015/04/16 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
PHP面向对象详解(三)
2015/12/07 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
用 javascript 实现的点击复制代码
2007/03/24 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
python实现sublime3的less编译插件示例
2014/04/27 Python
numpy中的高维数组转置实例
2018/04/17 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
python实现三次样条插值
2018/12/17 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
国庆宣传标语
2014/06/30 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
公务员政审个人总结
2015/02/12 职场文书
母亲去世追悼词
2015/06/23 职场文书
晚会开幕词范文
2016/03/04 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
Kubernetes控制节点的部署
2022/04/01 Servers
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android