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的横向滚动条(滑动条)
Feb 24 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 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 checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
js正则相关知识点专题
2018/05/10 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
利用aardio给python编写图形界面
2017/08/21 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
家长对老师的感言
2014/03/11 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
旷工辞退通知书
2015/04/17 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS