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 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 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文件上传的简单实例
2013/10/19 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
PHP 8新特性简介
2020/08/18 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
javascript中的array数组使用技巧
2010/01/31 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
js实现碰撞检测
2021/01/29 Javascript
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
生物学学生自我评价
2014/01/17 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL