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生成asp.net服务器控件的代码
Feb 04 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
js实现移动端轮播图
Dec 21 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
vue实现员工信息录入功能
Jun 11 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
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
解析URI与URL之间的区别与联系
2013/11/22 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
python三大神器之fabric使用教程
2019/06/10 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
python实现按首字母分类查找功能
2019/10/31 Python
Python 操作 MySQL数据库
2020/09/18 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
护士自我评价
2014/02/01 职场文书
大学生活动策划方案
2014/02/10 职场文书
上课看小说检讨书
2014/02/22 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
医院党员公开承诺书
2014/08/30 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
开展警示教育活动总结
2015/05/09 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server