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 相关文章推荐
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
javascript操作excel生成报表示例
May 08 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
Vue使用screenfull实现全屏效果
Sep 17 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/03/05 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
vue cli 全面解析
2018/02/28 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
django form和field具体方法和属性说明
2020/07/09 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
小结Python的反射机制
2020/09/28 Python
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
优秀团员个人事迹材料
2014/01/29 职场文书
企业文化建设实施方案
2014/03/22 职场文书
股票投资建议书
2014/05/19 职场文书
材料物理专业求职信
2014/09/01 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
2016大一新生军训感言
2015/12/08 职场文书