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

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

具体代码如下:

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

JS中双击和单击事件冲突解决的更多相关文章

  1. js中的点击事件(click)的实现方式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. JQuery如何实现双击事件时不触发单击事件,解决鼠标单双击冲突问题

    在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblcli ...

  3. Angular JS中双击事件ng-dblclick避免同时触发两次单击事件ng-click的解决方案

    有些需求中,需要一个元素上既有双击事件,也有单击事件,而两者实现的效果不一样. 这时可以使用ng-dblclick与ng-click来实现需求,但是要避免浏览器将双击事件误认为是两次单击事件,从而出现 ...

  4. Android Listview中Button按钮点击事件冲突解决办法

    今天做项目时,ListView中含有了Button组件,心里一早就知道肯定会有冲突,因为以前就遇到过,并解决过,可惜当时没有记录下来. 今天在做的时候,继续被这个问题郁闷了一把,后来解决后,赶紧来记录 ...

  5. 为什么JS是单线程?JS中的Event Loop(事件循环)?JS如何实现异步?setimeout?

    https://segmentfault.com/a/1190000012806637 https://www.jianshu.com/p/93d756db8c81 首先,请牢记2点: (1) JS是 ...

  6. Android ScrollView 嵌套 ListView、 ListView 嵌套ScrollView Scroll事件冲突解决办法

    本人菜鸟一名,最近工作了,开始学习Android. 最近在做项目的时候,UX给了个design,大概就是下拉刷新的ListView中嵌套了ScrollView,而且还要在ScrollView中添加动画 ...

  7. js中的异步与同步,解决由异步引起的问题

    之前在项目中遇到过好多次因为异步引起的变量没有值,所以意识到了认识js中同步与异步机制的重要性 在单线程的js中,异步代码会被放入一个事件队列,等到所有其他代码执行后再执行,而不会阻塞线程. 下面是j ...

  8. Android动画及滑动事件冲突解决(转载)

    原文链接:http://blog.csdn.net/singwhatiwanna/article/details/38168103 Android开发中动画和事件处理是程序员迈向高手的必经之路,也是重 ...

  9. GridView的点击事件冲突解决

    在开发的时候,常常可能遇到ListView或GridView控件点击事件与Item点击事件冲突的问题.原因是Item布局中的button或ImageButton强制获取了item的焦点,解决方案之中的 ...

随机推荐

  1. [原创]java WEB学习笔记41:简单标签之带属性的自定义标签(输出指定文件,计算并输出两个数的最大值 demo)

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  2. 【leetcode刷题笔记】Permutations II

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  3. P3160 [CQOI2012]局部极小值

    题目 P3160 [CQOI2012]局部极小值 一眼就是状压,接下来就不知道了\(qwq\) 做法 我们能手玩出局部小值最多差不多是\(8,9\)个的样子,\(dp_{i,j}\)为填满\(1~i\ ...

  4. Linux - xshell上传文件报错乱码

    xshell上传文件报错乱码,解决方法 rz -be 回车 下载sz  filename

  5. JAVA- 切换默认的Java

    删除自带的java yum remove java java -version发现还有java,因为电脑上安装了多个版本的java,这时我们可以用 yum groupremove java 通过组的这 ...

  6. Spring MVC工作原理(好用版)

    Spring MVC工作原理 参考: SpringMVC工作原理 - 平凡希 - 博客园https://www.cnblogs.com/xiaoxi/p/6164383.html SpringMVC的 ...

  7. node.js+express+jade系列六:图片的上传

    安装npm install formidable 先把文件上传到临时文件夹,再通过fs重命名移动到指定的目录即可 fs.rename即重命名,但是fs.rename不能夸磁盘移动文件,所以我们需要指定 ...

  8. 超链接向servlet传参数

    超链接传参数方式如下: <a href=xxxServlet?flag=1  target=“XX”></a> 注意:target=“XX”是用来指定在什么窗体打开.xx为该窗 ...

  9. Python TCP通信网络编程

    最近在看廖雪峰老师的基础教程(http://www.liaoxuefeng.com/),今天实现了一下简单Python的Socket的网络编程. 1. Socket网络编程 Socket是网络编程的一 ...

  10. 08 - Django应用第五步

    1 自动测试 自动测试与测试的不同在于, 自动测试的测试工作是交给系统完成的 测试也有分类和级别, 有的用于一些细微的细节, 有的是针对整个软件整体 测试会保证一些看起来正常运行的功能在实际的多种情况 ...