JS中双击和单击事件冲突的解决方法


Posted in Javascript onApril 09, 2018

在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 事件的处理
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 Javascript
vue脚手架及vue-router基本使用
Apr 09 #Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 #Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 #Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 #Javascript
webpack 模块热替换原理
Apr 09 #Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 #Javascript
浅谈webpack 自动刷新与解析
Apr 09 #Javascript
You might like
第八节--访问方式
2006/11/16 PHP
php5.3 注意事项说明
2013/07/01 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
js的hasownproperty使用示例
2014/03/02 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
汽车专业毕业生推荐信
2013/11/12 职场文书
商业街策划方案
2014/05/31 职场文书
消防宣传口号
2014/06/16 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
劳模先进事迹材料
2014/12/24 职场文书
初二学生评语大全
2014/12/26 职场文书
爱心募捐通知范文
2015/04/27 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
Django+Celery实现定时任务的示例
2021/06/23 Python
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android