在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. 剑指offer——和为s的两个数字VS和为s的连续正数序列

    两种方法都类似于快排的变形. #include <iostream> #include <string> using namespace std; bool FindNumbe ...

  2. 剑指offer之 二维数组的查找

    package Problem3; public class Find { /* * 题目描述:二维数组中的查找 * 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下的顺序排 ...

  3. 【转】Struts2的线程安全 和Struts2中的设计模式----ThreadLocal模式

    [转]Struts2的线程安全 和Struts2中的设计模式----ThreadLocal模式 博客分类: 企业应用面临的问题 java并发编程 Struts2的线程安全ThreadLocal模式St ...

  4. LinkedBlockingQueue,ArrayListBlockingQueue,SynchronousQueue

    LinkedBlockingQueue :1.读写锁分开,性能较 ArrayListBlockingQueue 只有一把锁控制读写要高一些.2.无界队列,不会触发Reject异常,ArrayListB ...

  5. ckeditor出现错误“从客户端(***)中检测到有潜在危险的 Request.Form值”的解决方法

    ckeditor出现错误“从客户端(***)中检测到有潜在危险的 Request.Form值”的解决方法 页面中使用ckeditor,提交文章时总是出错,“从客户端(TextBox1="&l ...

  6. node Express安装和使用

    1:在cmd命令行下执行npm install -g express,安装全局的express 2:进入需要创建项目的目录下执行express nodeExpressProject,创建express ...

  7. 1045 Favorite Color Stripe (30)(30 分)

    Eva is trying to make her own color stripe out of a given one. She would like to keep only her favor ...

  8. ACM学习历程—CodeForces 601A The Two Routes(最短路)

    题目链接:http://codeforces.com/problemset/problem/601/A 题目大意是有铁路和陆路两种路,而且两种方式走的交通工具不能在中途相遇. 此外,有铁路的地方肯定没 ...

  9. Android HttpGet和HttpPost设置超时

    HttpPost: private Runnable runnable = new Runnable() { @Override public void run() { String url = Ba ...

  10. Poj 2403 Hay Points(Map)

    一.题目大意 实现一个工资计算系统.工资的计算规则是:首先,给定一些关键字和对应的价值,这个相对于字典.然后给出的是求职者的描述,如果这个描述中包含关键字则加上对应的价值,总得价值就是这个求职者的工资 ...