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 相关文章推荐
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
javascript定时器完整实例
Feb 10 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
js实现随机圆与矩形功能
Oct 29 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
浅谈Node.js之异步流控制
2017/10/25 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
python运行时间的几种方法
2016/06/17 Python
python2 与python3的print区别小结
2018/01/16 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
对python 调用类属性的方法详解
2019/07/02 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
销售员个人求职的自我评价
2014/02/10 职场文书
请假条范文大全
2014/04/10 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
工作岗位职责范本
2015/02/15 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
运动会5000米加油稿
2015/07/21 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫