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操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
PHP图片水印类的封装
2017/07/06 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
img的onload的另类用法
2008/01/10 Javascript
js取得url地址参数实例
2013/02/22 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
python使用opencv进行人脸识别
2017/04/07 Python
Python类继承和多态原理解析
2020/02/05 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
用python实现名片管理系统
2020/06/18 Python
python exit出错原因整理
2020/08/31 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
某公司Java工程师面试题笔试题
2016/03/27 面试题
业务主管岗位职责范本
2013/12/25 职场文书
《日月潭》教学反思
2014/02/28 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
家长给学校的建议书
2014/05/15 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
无故旷工检讨书
2015/08/15 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏