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 null和undefined区别分析
Oct 14 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
模拟select的代码
Oct 19 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
使用Vue实现一个树组件的示例
Nov 06 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使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
python实现自动更换ip的方法
2015/05/05 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
8种常用的Python工具
2020/08/05 Python
详解Python中import机制
2020/09/11 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
最新的咖啡店创业计划书
2013/12/30 职场文书
植树节标语
2014/06/27 职场文书
辞职信标准格式
2015/02/27 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
业务员管理制度范本
2015/08/06 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python