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 相关文章推荐
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 Javascript
JSON取值前判断
Dec 23 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 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
php简单smarty入门程序实例
2015/06/11 PHP
js 多浏览器分别判断代码
2010/04/01 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
使用python实现飞机大战游戏
2020/03/23 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
MySQL面试题目集锦
2016/04/14 面试题
医院后勤自我鉴定
2013/10/13 职场文书
大学生志愿者感言
2014/01/15 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
2014年领班工作总结
2014/11/25 职场文书
经验交流材料格式
2014/12/30 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android