编程 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 相关文章推荐

理解Javascript_03_javascript全局观

Oct 11 Javascript

基于jQuery的合并表格中相同文本的相邻单元格的代码

Apr 06 Javascript

js 完美图片新闻轮转效果，腾讯大粤网首页图片轮转改造而来

Nov 21 Javascript

使用GruntJS构建Web程序之合并压缩篇

Jun 06 Javascript

JavaScript实现数字数组正序排列的方法

Apr 06 Javascript

jQuery实现的网页右下角tab样式在线客服效果代码

Oct 23 Javascript

Angular.js实现注册系统的实例详解

Dec 18 Javascript

vue 中directive功能的简单实现

Jan 05 Javascript

vue和webpack项目构建过程常用的npm命令详解

Jun 15 Javascript

微信小程序中使用Async-await方法异步请求变为同步请求方法

Mar 28 Javascript

jquery.pager.js实现分页效果

Jul 29 jQuery

JS实现盒子拖拽效果

Feb 06 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