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 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
VUE脚手架具体使用方法
May 20 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
解决Antd Table组件表头不对齐的问题
Oct 27 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
Yii2.0多文件上传实例说明
2017/07/24 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
php跨域调用json的例子
2013/11/13 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
详解python运行三种方式
2019/05/13 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
python压包的概念及实例详解
2021/02/17 Python
pip install命令安装扩展库整理
2021/03/02 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
机械设计及其自动化专业推荐信
2013/10/31 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
八一建军节活动方案
2014/02/10 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android