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 相关文章推荐
JavaScript 全角转半角部分
Oct 28 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
React降级配置及Ant Design配置详解
Dec 27 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
PHP与以太坊交互详解
2018/08/24 PHP
原生javascript兼容性测试实例
2013/07/01 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
vue二级路由设置方法
2018/02/09 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
js实现碰撞检测
2021/01/29 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
对numpy中shape的深入理解
2018/06/15 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
python匿名函数的使用方法解析
2019/10/10 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
Python模块 _winreg操作注册表
2020/02/05 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
新西兰优惠网站:Treat Me
2019/07/04 全球购物
《放飞蜻蜓》教学反思
2014/04/27 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
Python中的xlrd模块使用整理
2021/06/15 Python