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 相关文章推荐
document.compatMode介绍
May 21 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
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
地摊中国 - 珍藏老照片
2020/08/18 杂记
php5.2.0内存管理改进
2007/01/22 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
Python and、or以及and-or语法总结
2015/04/14 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
利用python修改json文件的value方法
2018/12/31 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
python制作朋友圈九宫格图片
2019/11/03 Python
Python 音频生成器的实现示例
2019/12/24 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
年终考核评语
2014/01/19 职场文书
班级标语大全
2014/06/21 职场文书
委托书格式
2014/08/01 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
2016公司新年问候语
2015/11/11 职场文书