某某茶叶有限公司欢迎您!
金沙棋牌在线 > 服务器&运维 > JS实现鼠标单击与双击事件共存_javascript技巧_脚本之家

JS实现鼠标单击与双击事件共存_javascript技巧_脚本之家

时间:2019-12-01 06:52

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

在JS中代码中同一功能块中通常同时会用到单击、双击事件,但通常会遇到一个问题,就是在双击的时候即执行了一次双击事件,而且还执行了两次单击事件。此类冲突在ZTree、DHTMLX中经常遇到。

情况一

通过一番研究后,终于利用JS中“setTimeout”延时执行方法的办法,将单击延迟300毫秒执行才解决了,代码如下:复制代码 代码如下:

想要解决两个事件冲突,需要对单击事件进行延时,如果在此延时中又监测到单击事件,那么认为此两次单击属于一个双击事件,则只执行双击事件,并第一时间将延时定时器清理,以防止第二次单击生效。

如果在一个DOM对象上同时绑定单击事件,当在这个DOM对象上发生双击事件时,第一次点击事件,第二次点击事件,还是会触发单击事件。

提交

var clickFlag = null;//是否点击标识function doOnClick {//取消上次延时未执行的方法 clickFlag = clearTimeout; } clickFlag = setTimeout { // click 事件的处理 }, 300);//延时300毫秒执行}function doOnDblClick {//取消上次延时未执行的方法 clickFlag = clearTimeout; } // dblclick 事件的处理}

解决方法: