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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 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服务器实现多session并发运行
2006/10/09 PHP
一个简单计数器的源代码
2006/10/09 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
javascript alert乱码的解决方法
2013/11/05 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
跟老齐学Python之编写类之二方法
2014/10/11 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
python实现多人聊天室
2020/03/31 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
个人委托书范本
2014/04/02 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
HDFS免重启挂载新磁盘
2022/04/06 Servers
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS