首页
学习
活动
专区
工具
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和双击事件...但是需求是单击和双击不同处理,所以双击时候不应该触发单击事件。 解决方案 思路:可以使用函数防抖做法,单击事件触发后,开启一个定时器,双击事件触发的话就清除定时器。...{ console.log(1); }); timer = setTimeout(() => { console.log(2); }); clearTimeout(timer); 这个案例,...el-checkbox使用注意点 双击事件和单击事件问题处理完了,再加上一下下项目的踩坑点。 el-checkbox没有事件对象,平常事件对象在el-checkbox上是布尔值,表示是否选中。

    3.8K30

    Android双击事件拦截方法

    下文我们介绍两种双击事件拦截方式 1.通过Android事件分发机制进行拦截(dispatchTouchEvent) 话不多说,直接上代码: /** 判断是否是快速点击 */ private static...isFastDoubleClick()) { return true; } } return super.dispatchTouchEvent(ev); } 用法就是直接在你需要拦截双击事件类中加入这两个函数...,系统会自动调用dispatchTouchEvent进行事件拦截,屏蔽掉双击事件,可以通过调整上述时间达到你想要效果 缺点就是加入后整个activity都会屏蔽掉双击事件,可能会影响其他组件正常使用...return true; } lastClickTime = time; return false; } 使用方法就是将这个函数放到一个工具类,在你需要进行双击事件拦截时,直接调用这个函数进行判断即可...,有没有很方便 以上这篇Android双击事件拦截方法就是小编分享给大家全部内容了,希望能给大家一个参考。

    1.9K10

    js事件(event)

    当然我们也可以不给事件绑定处理方法,也就是说当此事件发生时候,什么也不需要做,事件常有,而事件上绑定方法不一定有, 我们给页面元素某个事件绑定处理方法时候。...”事件对象赋给这个形参e,这时这个e是个系统级对象:事件; IE事件对象是个全局属性window.event,而标准浏览器事件对象就是形参e; 所以事件对象兼容性写法为:e = e||window.event...,相当于文档鼠标的坐标; target事件源;事件概念:事件最终发生在页面的那个元素上; 事件源和事件传播是息息相关 事件传播包括:冒泡和捕获;事件传播是浏览器在处理事件行为机制,冒泡阶段或者捕获阶段...;当你在一个form表单里点击提交按钮时网页会产生一个行为病刷新网页,当你网页上滚动鼠标滚轮时候,页面的滚动条会滚动等等;这些都叫事件默认行为,如果想把这些默认行为取消了,相应js代码如下: a.onclick...在W3C标准是在同一事件上,先绑定方法先执行,并且不能重复绑定同一个方法在同一个事件上,但是IE6、7、8,如果绑定方法少于9个,执行顺序是相反,超过9个,执行顺序就是混乱,这些IE问题都是比较严重

    6.8K30

    【插件开发】—— 13 GEF双击模型事件

    而对于GEF典型应用场景,模型拖拽编辑,一个常用操作方式就是双击模型弹出对话框进行编辑。但是由于模型是我们自己定义,如何双击模型产生事件这个就点摸不着头脑了。   ...下面介绍两种常见双击模型,产生响应方法:   第一种 performRequest   在模型对应EditPart添加performRequest方法,捕捉事件 public void performRequest...第二种,就是在Editor类,对整个viewer添加双击事件监听   首先我们需要定义一个接口 1 public interface IDoubleClickSupport { 2 3 public...然后,需要在Editor.java添加监听事件 1 protected void initializeGraphicalViewer() { 2 viewer = getGraphicalViewer...,如果这个对象属于我们自己定义接口,就会触发双击事件

    1K80

    jQuery 双击事件(dblclick)时,不触发单击事件(click)

    出处:jQuery 双击事件(dblclick)时,不触发单击事件(click) 在jQuery事件绑定,执行双击事件(dblclick)时能触发两次单击事件(click)。...即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick...mouseout,click,dblclick; 在双击事件(dblclick),触发两次单击事件(click),第一次单击事件(click)会被屏蔽掉,但第二次不会。...也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。...); }); $('div').dblclick(functin () { // 取消上次延时未执行方法 clearTimeout(TimeFn); //双击事件执行代码

    5.3K30

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

    在布局文件添加按钮点击事件 在java文件添加按钮点击事件 为多个按钮添加点击事件 按钮按下、释放事件 按钮长按事件 按钮长按时过滤掉单击事件 按钮双击事件 按钮双击时过滤掉单击事件 在布局文件添加按钮点击事件...2、在对应.java文件添加名为showMsg方法 此方法需满足以下条件: 与xml布局文件名称一致 是public函数 无返回值(void 类型) 参数唯一(为View类型,代表被点击视图...,每当点击按钮时,就会执行监听器onClick()方法。...,因为按钮双击时仍然会先触发单击事件。如果只需要处理双击事件的话则不需考虑这一点,如果要在同一个按钮单击或双击时处理不同内容,则需在双击时过滤掉单击事件。...按钮双击时过滤掉单击事件 双击时过滤单击事件思路可参考以前在Qt应用(QML之MouseArea双击时过滤掉单击事件):在按钮点击时开启定时器,判断300ms内有没有第二次点击,有的话表示双击

    2.2K20

    JStouch事件与canvas绘图

    changeTouches:表示从上一次触摸以来,发生了改变touch对象数组。 通过一个例子来区分一下触摸事件这三个属性: 用一个手指接触屏幕,触发事件,此时这三个属性有相同值。...Touch.identifier 此 Touch 对象唯一标识符. 一次触摸动作(我们指的是手指触摸)在平面上移动整个过程, 该标识符不变. 可以根据它来判断跟踪是否是同一次触摸过程....Touch.target 当这个触点最开始被跟踪时(在 touchstart 事件), 触点位于HTML元素....哪怕在触点移动过程, 触点位置已经离开了这个元素有效交互区域, 或者这个元素已经被从文档移除....因此, 如果有元素在触摸过程可能被移除, 最佳实践是将触摸事件监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它上一级元素上侦测到从该元素冒泡事件.

    7.5K41

    JSDOM事件流总结

    一、事件捕获 1.概念 事件捕获:从document到触发事件那个节点,自上而下去触发事件。...2.图解 事件捕获 二、事件冒泡 1.概念 事件冒泡:从触发事件那个节点一直到document,是自下而上去触发事件。...2.图解 DOM事件流 3.示例 绑定事件方法(addEventListener)第三个参数是控制事件触发顺序,默认为false,即事件冒泡;若为true,即事件捕获。 <!...1.用法 #当在事件流执行过程,需要阻止后续事件执行,可以使用以下语法 event.stopPropagation(); 2.示例 <!...目标阶段处理函数,先注册先执行,后注册后执行。 事件阻止只能阻止后续阶段事件并且未作用于同一元素上事件函数。

    3.9K30

    jscompositionstart和compositionend事件

    然而当我们输入中文时候,由于拼音会先显示,导致在输入中文过程,触发筛选列表空,最后中文显示出来时候,才会有显示结果。...也就是说,在我们开始输入中文时候会触发一次compositionstart事件,中文输入过程不会再出发compositionstart事件,最后输入中文完成触发compositionend 事件。...只有在lock为false时候,才执行input事件筛选操作。...vue v-model双向绑定形式,如果你使用 v-model形式,你会发现在输入中文过程不会触发input事件。...查看vue源码 src/platforms/web/runtime/directives/model.js,有这么几行代码: export default { inserted (el, binding

    2.1K20
    领券