首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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); // 双击触发事件

6.1K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    双击事件单击事件的那些事 前言 项目遇到了双击事件会同时触发单击事件的bug,还是简单记录一下。 心里话:日更太累了。以前都是单独花好几天的时间去看别人的博客,看很多博客后再慢慢输出。..."); } function mydblclick() { console.error("双击事件"); } 图片 合情合理,双击事件也是两次点击事件,所以同时会触发单击事件click和双击事件...但是需求是单击双击不同的处理,所以双击的时候不应该触发单击事件。 解决方案 思路:可以使用函数防抖的做法,单击事件触发后,开启一个定时器,双击事件触发的话就清除定时器。...function mydblclick() { clearTimeout(timer); console.error("双击事件"); } 图片 可以发现还是有问题,双击事件还是会触发一次单击事件...el-checkbox使用注意点 双击事件单击事件的问题处理完了,再加上一下下项目的踩坑点。 el-checkbox没有事件对象,平常的事件对象在el-checkbox上是布尔值,表示是否选中。

    3.8K30

    Android之按钮点击事件单击双击、长按等)

    在布局文件中添加按钮点击事件 在java文件中添加按钮点击事件 为多个按钮添加点击事件 按钮按下、释放事件 按钮长按事件 按钮长按时过滤掉单击事件 按钮双击事件 按钮双击过滤掉单击事件 在布局文件中添加按钮点击事件...,因为按钮长按时仍然会触发点击事件。如果只需要处理长按事件的话则不需考虑这一点,如果要在同一个按钮单击或长按时处理不同的内容,则需在长按时过滤掉单击事件。...这里涉及到事件传播的问题,当处理事件的返回值为false表示该事件未完全处理完毕,事件会继续向下传播。...,因为按钮双击仍然会先触发单击事件。如果只需要处理双击事件的话则不需考虑这一点,如果要在同一个按钮单击双击处理不同的内容,则需在双击过滤掉单击事件。...按钮双击过滤掉单击事件 双击过滤单击事件的思路可参考以前在Qt中的应用(QML之MouseArea双击过滤掉单击事件):在按钮点击开启定时器,判断300ms内有没有第二次点击,有的话表示双击

    2.1K20

    双击事件(dblclick),不触发鼠标按下(mousedown) 动作事件

    在一个dom节点的事件绑定中,如果同时绑定了dblclick和mousedown那么想要执行双击事件(dblclick)能就会触发两次mousedown事件。...dblclick事件则会在mousedown、mouseup、click之后触发。 mouseover事件和mouseenter事件,都是鼠标进入一个节点触发。...在单击的时候(也就是鼠标按下的时候)不会执行双击,但是双击的时候会执行两次单击再执行双击事件。 解决的思路:要想双击不执行单击事件,就使用定时器清除掉两个单击事件,留下一个双击事件。...(this.timeOut) console.log(event.target, 'handleDblclick'); }, 关于实现原理 在setTimeout 中的 time=200,大家知道js...第一次单击任务不执行了,是被定时器延时,然后第二次点击的时候给清除了。那么第二次点击事件呢? 在两次单击之后,会立马执行一个双击事件双击事件的一开头就把这个第二次点击事件给清除了。

    62520

    【Flutter】Flutter 手势交互 ( 点击事件处理 | 点击 onTap | 双击 | 长按 onLongPress | 点击取消 | 按下 onTapDown | 抬起 onTapUp )

    手势检测组件 GestureDetector( // 点击事件 onTap: (){ print("双击"); }, // 双击事件 onDoubleTap: (){...print("双击"); }, // 长按事件 , ()=>方法名(参数列表) 即可回调一个现有方法 onLongPress: () => _longPress(), // 点击取消...---- GestureDetector 常用事件说明 : onTap : 单击事件 ; onDoubleTap : 双击事件 ; onLongPress : 长按事件 ; onTapCancel :...点击事件取消 , 一个完整的点击事件由按下 , 抬起 组成 , 如果按下后一直没有松开 , 就变成了长按操作 , 此时单击事件自动取消 ; 如果按下后滑出了 child 组件 , 则自动变为点击取消事件...; onTapDown : 单击按下事件 ; onTapUp : 单击抬起事件 ; 三、完整代码示例 ---- 完整代码示例 : import 'package:flutter/material.dart

    2K00

    MFC vc++ 中CTreeContrl如何自定义实现鼠标单击双击响应事件 ,即重写类似于控件的响应事件或消息

    details/51006920#commentsedit 目的:自定义修改mfc窗口的FileView中已有的树结构,而不是添加的树控件 实现的效果如图:点击“地图”后弹出框提示,点击响应效果与控件的响应事件类似...CtreeContrl: ① 在CViewTree类的.h头文件中添加代码: afx_msg void OnDblClkTree(NMHDR* pNMHDR, LRESULT* pResult);//双击事件...afx_msg void OnClkTree(NMHDR* pNMHDR, LRESULT* pResult);//单击事件 ② 添加后的.h文件如下: #pragma once ////////...OnClkTree(NMHDR* pNMHDR, LRESULT* pResult); protected: DECLARE_MESSAGE_MAP() }; ③  CViewTree类的cpp源文件中实现该事件...以上即可实现CtreeContrl的点击事件

    1.8K30

    javaScript事件处理

    ---- ---- JS事件指再浏览器窗体或者HTML元素上发生的,乐意触发JS代码块运行的行为,下面,我们一起来看看相关事件。...1.窗体事件 例如 onload事件:当页面完全加载完成之后(包括图像,js文件,css文件等)该事件就会被触发。 <!...焦点事件:指元素对焦点的获得与失去,如文本框选中或者取消选中。 ---- 2.鼠标事件 例如当鼠标单击左键,会发生onclick事件: <!...ondblclick 鼠标双击某个对象 onerror 当加载文档或者图像发生某个错误 onfocus 元素获得焦点 onkeydown 某个键盘的键被按下 onkeypress 某个键盘的键被按下或者按住...HTML元素产生一个事件,该事件会在元素节点和根节点之间按特定的顺序转播,类似于递和归。

    2.3K10

    HarmonyOS实战—实现抖音点赞和取消点赞效果

    业务分析: 双击屏幕之后点赞。(上面已实现),再次双击屏幕之后,不会取消点赞,只有点击后红心之后才能取消点赞。...单击红心也可以点赞,再次单击红心就会取消点赞 实现思路: 给最外层的布局添加双击事件双击之后点赞,变成红色心。 如果已经被点赞,那么还是修改为红色心,相当于不做任何处理。 给图片添加单击事件。...代码实现: 上面布局文件不变,MainAbilitySlice 如下: 给布局添加双击事件,因为再次双击不会取消点赞,所以把else代码里设置为红色后就把 flag 取反去掉,就不会出现再次双击取消点赞了...给图片添加单击事件,因为涉及到点赞后为红色,再取消就变为白色,所以要把 flag 变为相反的操作 package com.xdr630.listenerapplication6.slice; import...: [在这里插入图片描述] 再次单击红心: [在这里插入图片描述] 双击屏幕后效果如下,再次双击屏幕就不会取消点赞了,只有点击小红心才能取消点赞 [在这里插入图片描述]

    1.9K20

    深入JavaScript之BOM、DOM和事件

    confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。...参数: js代码或者方法对象 毫秒值 返回值:唯一标识,用于取消定时器 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。...事件监听机制 概念 概念:某些组件被执行了某些操作后,触发某些代码的执行。 事件:某些操作。如: 单击双击,键盘按下了,鼠标移动了 事件源:组件。如: 按钮 文本输入框… 监听器:代码。...常见的事件 点击事件 onclick:单击事件 ondblclick:双击事件 焦点事件 onblur:失去焦点 onfocus:元素获得焦点。 加载事件 onload:一张页面或一幅图像完成加载。...如何绑定事件 直接在html标签上,指定事件的属性(操作),属性值就是js代码 事件:onclick— 单击事件 通过js获取元素对象,指定事件属性,设置一个函数 代码: <img

    2.9K30

    10-移动端开发教程-移动端事件

    由于双击缩放功能存在,click事件触发就会有大约200~300ms的延迟。 1.2 dblclick事件失效 由于双击缩放的存在,pc端的dblclick事件也失效了。 2....最基本的touch事件包括4个事件: touchstart: 当在屏幕上按下手指触发 touchmove: 当在屏幕上移动手指触发 touchend: 当在屏幕上抬起手指触发 touchcancel...当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发touchcancel。...有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同): 由于某个事件取消了触摸:例如触摸过程被一个模态的弹出框打断。...return this; } }, /*单击事件: * 为了规避click的300ms的延迟,自定义一个单击事件

    6.8K80

    10-移动端开发教程-移动端事件

    由于双击缩放功能存在,click事件触发就会有大约200~300ms的延迟。 1.2 dblclick事件失效 由于双击缩放的存在,pc端的dblclick事件也失效了。 2....最基本的touch事件包括4个事件: touchstart: 当在屏幕上按下手指触发 touchmove: 当在屏幕上移动手指触发 touchend: 当在屏幕上抬起手指触发...touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发touchcancel。...有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同): 由于某个事件取消了触摸:例如触摸过程被一个模态的弹出框打断。...return this; } }, /*单击事件: * 为了规避click的300ms的延迟,自定义一个单击事件

    6.4K70
    领券