加入收藏 | 设为首页 | 会员中心 | 我要投稿 聊城站长网 (https://www.0635zz.com/)- 智能语音交互、行业智能、AI应用、云计算、5G!
当前位置: 首页 > 教程 > 正文

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

发布时间:2023-10-26 15:30:01 所属栏目:教程 来源:
导读:一直都认为在Web开发中,双击事件都是少至又少地使用,直到最近项目需要,要在一个按钮上绑定单击与双击两件事件。开始也觉得不就是给按钮绑下两个事件而已罢了……只是后来才明白,是我想得太简单,在双
一直都认为在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>
 
 

(编辑:聊城站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章