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 :nth-child前有无空格的区别分析
Jul 11 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
js仿微博动态栏功能
Feb 22 Javascript
详解Node.js串行化流程控制
May 04 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 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实现的单一入口应用程序实例分析
2015/09/23 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
js调用css属性写法
2013/09/21 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
python的绘图工具matplotlib使用实例
2014/07/03 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
python编写微信公众号首图思路详解
2019/12/13 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
高中数学教学反思
2014/01/30 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
《尊严》教学反思
2014/02/11 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
语文教师个人工作总结
2015/02/06 职场文书
初中教师个人总结
2015/02/10 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
七年级数学教学反思
2016/02/17 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs