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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
jquery实现拖动效果
Aug 10 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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正确配置mysql(apache环境)
2011/08/28 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
jQuery解析Json实例详解
2015/11/24 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
python正则分组的应用
2013/11/10 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
python2.7到3.x迁移指南
2018/02/01 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Python 自由定制表格的实现示例
2020/03/20 Python
使用python计算三角形的斜边例子
2020/04/15 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
Python random模块的使用示例
2020/10/10 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
python函数超时自动退出的实操方法
2020/12/28 Python
初中生学习生活的自我评价
2013/11/20 职场文书
《木笛》教学反思
2014/03/01 职场文书
满月酒主持词
2014/03/27 职场文书
大学生就业策划书范文
2014/04/04 职场文书
贷款担保书范文
2014/05/13 职场文书
庆元旦演讲稿
2014/09/15 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
初三语文教学反思
2016/03/03 职场文书
vue+iview实现手机号分段输入框
2022/03/25 Vue.js