JS中双击和单击事件冲突的解决方法
更新时间：2018年04月09日 10:53:13 作者：snowsolf
这篇文章主要为大家详细介绍了JS中双击和单击事件冲突的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在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给按钮绑定点击事件（onclick）的方法
- js动态添加的DIV中的onclick事件简单实例
- javascript 动态改变onclick事件触发函数代码
- IE8的JavaScript点击事件(onclick)不兼容的解决方法
- JavaScript获取onclick、onchange等事件值的代码
- js动态添加onclick事件可传参数与不传参数
- javascript使用onclick事件改变选中行的颜色
- javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
- js鼠标单击和双击事件冲突问题的快速解决方法
- JS实现鼠标单击与双击事件共存
- JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
相关文章
这篇文章主要介绍了JS自定义混合Mixin函数,涉及javascript面向对象程序设计中函数与属性操作相关技巧,需要的朋友可以参考下2016-11-11
下面的代码是从实际项目中AJAX的回调部分 copy 出来的，使用了JS的递归，文本格式为JSON2010-05-05
这篇文章主要介绍了完美实现八种js焦点轮播图的具体资料，基于完美运动框架move2.js而完成的八种焦点录播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了js实现可多次定时的倒计时小实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
一个电商的app,商品的展示是必不可少的,联动分类展示是很常见的,下面这篇文章主要给大家介绍了关于uniapp实现左右联动商品分类页面的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
js实现ASP分页函数 HTML分页函数...2006-09-09
在论坛里经常看到人问选项卡或者类似选项卡的切换效果 这里封装了个js，希望对大家有用 所有代码都在下面了 如果有错误或者建议，可以回贴告诉我，谢谢2008-02-02
这篇文章主要介绍了Javascript模块化机制实现原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了快速使用Bootstrap搭建传送带的相关资料,非常具有参考借鉴价值，需要的朋友可以参考下2016-05-05
关于javascript中json 对象数组之间相互转化问题
这篇文章主要介绍了关于javascript中json 对象数组之间相互转化问题,在实际应用中，JSON对象和数组的结构可能更加复杂，需要根据具体情况进行相应的处理和转换，需要的朋友可以参考下2023-07-07
最新评论