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 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 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中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
python迭代器的使用方法实例
2013/11/21 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
Django中的文件的上传的几种方式
2018/07/23 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
Unix/Linux开发面试题
2016/08/16 面试题
清华大学自主招生自荐信
2014/01/29 职场文书
八年级美术教学反思
2014/02/02 职场文书
项目施工员岗位职责
2014/03/09 职场文书
消防安全责任书范本
2014/04/15 职场文书
计划生育诚信协议书
2014/11/02 职场文书
办公室规章制度范本
2015/08/04 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis