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+FSO遍历文件夹下文件并显示
Mar 07 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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
咖啡常见的种类
2021/03/03 新手入门
php 执行系统命令的方法
2009/07/07 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
基于php编程规范(详解)
2017/08/17 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
python获取一组汉字拼音首字母的方法
2015/07/01 Python
基于Django用户认证系统详解
2018/02/21 Python
详解python-图像处理(映射变换)
2019/03/22 Python
Python Pandas 箱线图的实现
2019/07/23 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
python next()和iter()函数原理解析
2020/02/07 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
分公司经理岗位职责
2013/11/11 职场文书
年会主持词结束语
2014/03/27 职场文书
保护环境倡议书300字
2014/05/19 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书