学习
实践
活动
专区
工具
TVP
写文章

双击事件与单击事件的那些事

双击事件与单击事件的那些事 前言 项目遇到了双击事件会同时触发单击事件的bug,还是简单记录一下。 心里话:日更太累了。以前都是单独花好几天的时间去看别人的博客,看很多博客后再慢慢输出。 " @click="myclick" @dblclick="mydblclick"> test </el-button> function myclick() { console.warn("单击事件 "); } function mydblclick() { console.error("双击事件"); } 图片 合情合理,双击事件也是两次点击事件,所以同时会触发单击事件click和双击事件 但是需求是单击和双击不同的处理,所以双击的时候不应该触发单击事件。 解决方案 思路:可以使用函数防抖的做法,单击事件触发后,开启一个定时器,双击事件触发的话就清除定时器。 let timer; function myclick() { timer = setTimeout(() => { console.warn("单击事件"); }, 300); }

10630

JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突,双击事件触发单击事件

js 的单双击事件同时存在会有一个问题:双击事件会同时触发单击事件,两个事件存在冲突。 我们加一个延迟时间就能很好的解决这个问题。 原理: 当接收到第一个点击时,我们先把单击事件存储在这个是全局变量 click_store 里,如果 0.3 秒内没有接收到双击事件,就去执行它,如果接收到了,我们把它清理掉,然后去执行双击事件。 var click_store // 定义一个全局变量存储单击触发事件 document.addEventListener('click', deal_click); document.addEventListener ('dblclick', deal_dblclick); function deal_click(e){ click_store = setTimeout(function(e){ // 单击触发事件 ,0.3s延迟 ... },300); } function deal_dblclick(e){ // 单击事件清理 clearTimeout(click_store); // 双击触发事件

2.3K30

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

相关产品

  • 人脸核身

    人脸核身

    腾讯云慧眼人脸核身(原金融级身份认证升级版)是一组对用户身份信息真实性进行验证审核的服务套件,提供各类认证功能模块,包含证件OCR识别、活体检测、人脸1:1对比、及各类要素信息核验能力,以解决行业内大量对用户身份信息核实的需求,广泛应用于金融、保险、政务民生、互联网、交通出行等领域。

相关资讯

热门标签

活动推荐

扫码关注腾讯云开发者

领取腾讯云代金券