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代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
js实现鼠标点击飘爱心效果
Aug 19 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面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
香港通票:Hong Kong Pass
2019/02/26 全球购物
搞笑获奖感言
2014/01/30 职场文书
书法比赛获奖感言
2014/02/10 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
护士自我推荐信范文
2015/03/24 职场文书
民事上诉状范文
2015/05/22 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP