解决双击事件触发两次单击事件

如果一个节点同时绑定了单击和双击事件, 那么双击的时候就会触发两次单击事件, 两个事件存在冲突。

可以通过增加一个延迟时间来解决这个问题.

let click_store = null; // 存储单击事件// 单击事件
function single(){// 清除第一次单击事件clearTimeout(click_store)click_store = setTimeout(function () {// 单击事件的代码// ...}, 300)
}// 双击事件
function double(){// 清除第二次单击事件clearTimeout(click_store)// 双击事件代码// ...
}

原理是:

双击时, 首先触发了单击事件, 由于设置了 300ms 的延迟, 所以单击事件并没有立即触发, 这个单击事件被存储在了 click_store 中.
在这300ms内, 发生了第二次单击鼠标的行为(双击), 触发了双击事件和第二次单击事件.
单击事件先发生, clearTimeout(click_store) 清除了存储在 click_store 中的第一次的单击事件, 然后进入定时器, 单击事件被存储在了 click_store 中, 并且延迟300ms执行.
在双击事件中, clearTimeout(click_store) 清除了存储在 click_store 中的第二次单击事件, 然后执行了双击事件的代码.
两次单击事件都被清除了, 所以最后发生的只有双击事件的代码.

本文参考:

JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突，双击事件触发单击事件 (这篇文章给的方法没有取消第二个单击事件, 所以最后会触发双击事件和一次单击事件)
双击事件（dblclick）时，不触发单击事件(click)

解决双击事件触发两次单击事件相关推荐

js双击会触发两次单击事件的解决方案
问题描述: javascript中,onclick为单击事件,ondblclick为双击事件,在同一DOM 对象上加上单击事件和双击事件时,双击会触发两次单击事件. 解决方案: 通过设置两次点击事件的 ...
js 关于双击会触发两次单击的解决方法
一.双击只触发一次单击的方法,这里通过setTimeout来解决 var clickCount=0; function oneClick(event, treeId, treeNode){ if(cl ...
jQuery —— 元素绑定单击事件（click），但是双击该元素也能触发单击事件，同时会触发两次单击事件的问题
最近做项目遇到一个问题,给元素绑定了单击事件,但是双击该元素时同样会触发单击事件,并且触发两次的问题,网上找了解决办法基本上都是用 clearTimeout .setTimeout 解决,但是效果不是 ...
js鼠标双击的时候如何屏蔽单击事件呢
给id ="one"的div添加双击单机事件代码 <div id="one" style="width: 400px; height: 400 ...
事件触发控制_基于事件触发机制的直流微电网多混合储能系统分层协调控制方法...
点击下面标题,了解通知详情第九届电工技术前沿问题学术论坛征文通知华北电力大学电气与电子工程学院的研究人员郭伟.赵洪山,在2020年第5期<电工技术学报>上撰文,以含有多个混合储能系统(H ...
python事件触发机制_python模拟事件触发机制详解
本文实例为大家分享了python模拟事件触发机制的具体代码,供大家参考,具体内容如下 EventManager.py # -*- encoding: UTF-8 -*- # 系统模块 from que ...
记录解决点击事件触发两次情况
//开发时用发现某个点击事件的事件用如下方式时内容被连续触发了2次 $(".btn-focus").click(function(){...}) 最后通过如下方式解决:(先解绑再添 ...
百度地图手机端单触点单击和长按事件，解决部分手机(小米手机)地图单击事件失效，多触点、拖动依然触发长按的bug
下面是实现的代码 /** * Author 岳晓 * * 对百度地图的事件扩展,目前扩展了fastclick和longclick, * 解决某些设备click不执行的问题 * 解决长按事件在拖动.多触 ...
百度地图路线规划onchange事件触发两次冲突解决
var map = new BMap.Map("allmap",{enableMapClick:false}); map.centerAndZoom("福州市&q ...
div内的button的click会触发两次(防止事件冒泡)
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">< ...

解决双击事件触发两次单击事件

解决双击事件触发两次单击事件相关推荐

最新文章

热门文章