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

前端技术 2023/09/07 JavaScript

一直都认为在Web开发中，双击事件都是少至又少地使用，直到最近项目需要，要在一个按钮上绑定单击与双击两件事件。开始也觉得不就是给按钮绑下两个事件而已罢了……只是后来才明白，是我想得太简单，在双击事件触发的同时也会触发单击的~囧

通过一番研究后，终于利用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>

本文地址：https://www.stayed.cn/item/20396

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案