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中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
理解javascript正则表达式
Mar 08 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 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 递归效率分析
2009/11/24 PHP
有关php运算符的知识大全
2011/11/03 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
简单讲解Python中的闭包
2015/08/11 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
Python sep参数使用方法详解
2020/02/12 Python
一文读懂Python 枚举
2020/08/25 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
历史学专业求职信
2014/06/19 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
同事去世追悼词
2015/06/23 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
php去除数组中为0的元素的实例分析
2021/11/17 PHP
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL