JS实现鼠标单击与双击事件共存


Posted in Javascript onMarch 08, 2014

一直都认为在Web开发中,双击事件都是少至又少地使用,直到最近项目需要,要在一个按钮上绑定单击与双击两件事件。开始也觉得不就是给按钮绑下两个事件而已罢了……只是后来才明白,是我想得太简单,在双击事件触发的同时也会触发单击的~??/P>

通过一番研究后,终于利用JS中“setTimeout”延时执行方法的办法,将单击延迟300毫秒执行才解决了,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    
<title></title>    
<mce:script src="jquery-1.6.min.js" mce_src="jquery-1.6.min.js" type="text/javascript"></mce:script>    
<mce:script type="text/javascript">
<!--        
$(function () {            
var num = 0;            
var timeFunName = null;            
$("button").bind("click", function () {                
// 取消上次延时未执行的方法                
clearTimeout(timeFunName);                
// 延时300毫秒执行单击                
timeFunName = setTimeout(function () {                    
num++;                    
$("textarea").val($("textarea").val() + "第" + num + "次事件,事件名:单击/n");                
}, 300);            }).bind("dblclick", function () {                
// 取消上次延时未执行的方法                
clearTimeout(timeFunName);                
num++;                
$("textarea").val($("textarea").val() + "第" + num + "次事件,事件名:双击/n");            
});        
});    
// --></mce:script>
</head>
<body>    
<textarea rows="20" cols="50"></textarea><button type="button">提交</button></body></html>
Javascript 相关文章推荐
动态加载iframe
Jun 16 Javascript
WordPress JQuery处理沙发头像
Jun 22 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
js简单抽奖代码
Jan 16 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
js触发onchange事件的方法说明
Mar 08 #Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 #Javascript
javascript中的事件代理初探
Mar 08 #Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 #Javascript
Extjs表单常见验证小结
Mar 07 #Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 #Javascript
禁用JavaScript控制台调试的方法
Mar 07 #Javascript
You might like
php实现数组按指定KEY排序的方法
2015/03/30 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
Python最小二乘法矩阵
2019/01/02 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
财务会计专业应届毕业生求职信
2013/10/18 职场文书
春节晚会主持词
2014/03/24 职场文书
保密工作责任书
2014/04/16 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
最感人的道歉情书
2015/05/12 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
党支部考察意见范文
2015/06/02 职场文书
大学体育课感想
2015/08/10 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python