编程 Javascript

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>

JS实现鼠标单击与双击事件共存

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

flash javascript之间的通讯方法小结

Dec 20 Javascript

js实现的跟随鼠标移动的时钟效果(中英文日期显示)

Jan 17 Javascript

什么是DOM(Document Object Model)文档对象模型

Mar 05 Javascript

拥抱模块化的JavaScript

Mar 07 Javascript

浅谈javascript属性onresize

Apr 20 Javascript

Bootstrap安装环境配置教程分享

May 27 Javascript

vue.js 1.x与2.0中js实时监听input值的变化

Mar 15 Javascript

javascript 开发之百度地图使用到的js函数整理

May 19 Javascript

使用JS实现气泡跟随鼠标移动的动画效果

Sep 16 Javascript

layui table 获取分页 limit的方法

Sep 20 Javascript

Vue如何实现监听组件原生事件

Jul 03 Javascript

vue+element ui实现锚点定位

Jun 29 Vue.js

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