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 相关文章推荐
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
React组件中的this的具体使用
Feb 28 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
浅谈javascript错误处理
Aug 11 Javascript
vue实现简单数据双向绑定
Apr 28 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
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
PHP制作万年历
2015/01/07 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
Python如何生成树形图案
2018/01/03 Python
python 接收处理外带的参数方法
2018/12/03 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
Python中的asyncio代码详解
2019/06/10 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
印度购物网站:TATA CLiQ
2017/11/23 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
小学老师寄语大全
2014/04/04 职场文书
百日安全生产活动总结
2014/07/05 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
Django migrate报错的解决方案
2021/05/20 Python
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技