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中跨域访问出现'没有权限'的错误
Aug 20 Javascript
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
vue实现行列转换的一种方法
Aug 06 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
自定义php类(查找/修改)xml文档
2013/03/26 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
Js四则运算函数代码
2012/07/21 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
js的三种继承方式详解
2017/01/21 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
[00:14]护身甲盾
2019/03/06 DOTA
python中urllib模块用法实例详解
2014/11/19 Python
python简单获取数组元素个数的方法
2015/07/13 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
中文教师求职信
2014/02/22 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
2015年测量员工作总结
2015/05/23 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL