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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
详谈javascript中的cookie
Jun 03 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
微信小程序canvas实现签名功能
Jan 19 Javascript
浅谈JS的原型和原型链
Jun 04 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
一百多行python代码实现抢票助手
2018/09/25 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
李培根演讲稿
2014/05/22 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
怒海潜将观后感
2015/06/11 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang
js前端图片加载异常兜底方案
2022/06/21 Javascript