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修改表格背景色实例代码分享
Dec 10 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 Javascript
关于Js中new操作符的作用详解
Feb 21 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
Augularjs-起步详解
2016/07/08 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
React diff算法的实现示例
2018/04/20 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
python访问sqlserver示例
2014/02/10 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
Python中正则表达式详解
2017/05/17 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
Django中modelform组件实例用法总结
2020/02/10 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
给老婆的婚前保证书
2014/02/01 职场文书
文明餐桌活动方案
2014/02/11 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
2014年质检员工作总结
2014/11/18 职场文书
财务部岗位职责
2015/02/03 职场文书