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 Tools tab使用介绍
Jul 14 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
Postman动态获取返回值过程详解
Jun 30 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 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的简单采集数据入库程序
2014/07/30 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
js实现车辆管理系统
2020/08/26 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
python3 字符串知识点学习笔记
2020/02/08 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
业务主管岗位职责
2013/11/20 职场文书
党员公开承诺书2015
2015/01/21 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
如何Tomcat中使用ipv6地址
2022/05/06 Servers