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

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

具体代码如下:

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 -- Properties类使用 读取配置文档

    Java-Properties类的使用 分类: Java基础 2007-05-11 19:35 2666人阅读 评论(1) 收藏 举报 propertiesxmlimportexceptionstri ...

  2. Thrift文件加载

    一.简述 通过前面的分析,我们知道无论是创建一个客户端还是服务器,第一步要做的就是调用thriftpy.load对thrift文件进行解析,并在内存中构建相应的module,本文将对load方法进行一 ...

  3. unit Base64Unit;

    unit Base64Unit; unit Base64Unit; //Download by http://www.codefans.net interface uses Classes, SysU ...

  4. 分享知识-快乐自己:PageHelper 分页关键基础代码

    关键代码:点我下载样式   详细介绍 //使用分页插件 jQuery("#pagination").pagination(data.total, { items_per_page: ...

  5. php判断是否是微信浏览器

    php判断是否是微信浏览器 直接上代码: <?PHP function is_wechat_browser(){ $user_agent = $_SERVER['HTTP_USER_AGENT' ...

  6. Java进阶08 GUI

    GUI(Graphical User Interface)提供了图形化的界面,允许用户以图形的方式与系统进行互动.在GUI推广之前,用户通常要以文本命令的方式来控制计算机.GUI直观的将计算机的功能呈 ...

  7. 设计模式 之 《建造者模式(Builder)》

    #ifndef __BUILDER_MODEL__ #define __BUILDER_MODEL__ #include <string> #include <vector> ...

  8. C语言小程序(四)、杨辉三角

    输入要显示的杨辉三角的行数,会打印出金字塔型的杨辉三角,不过行数太多的话,效果不太好,可以再调整一下格式控制. #include <stdio.h> #include <stdlib ...

  9. bzoj1014火星人

    ...强迫症终于A了这道题  bzoj前30道全A指日可待 splay维护这个结点控制的字符串的hash值 每次旋转重新算一遍就可以了 查询的时候跑一个二分 讲起来很简单但是还是调了1h才调对了spl ...

  10. 【LeetCode】084. Largest Rectangle in Histogram

    题目: Given n non-negative integers representing the histogram's bar height where the width of each ba ...