如何解决JS中双击和单击事件冲突的问题

这篇文章主要为大家展示了“如何解决JS中双击和单击事件冲突的问题”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何解决JS中双击和单击事件冲突的问题”这篇文章吧。

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站设计、网站建设、静海网络推广、重庆小程序开发公司、静海网络营销、静海企业策划、静海品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供静海建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

在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中双击和单击事件冲突的问题”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！