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实现关闭js弹出层的窗口
Feb 10 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
了解JavaScript中let语句
May 30 Javascript
JavaScript实现随机点名小程序
Oct 29 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
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
1.PHP简介
2006/10/09 PHP
一个用php3编写的简单计数器
2006/10/09 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
three.js实现圆柱体
2018/12/30 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python实现马耳可夫链算法实例分析
2015/05/20 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
毕业生自荐信的主要内容
2013/10/29 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
七年级作文之雪景
2019/11/18 职场文书
详解Python常用的魔法方法
2021/06/03 Python
Go语言grpc和protobuf
2022/04/13 Golang