首页
学习
活动
专区
工具
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

    基于PyQT实现区分左键双击单击

    在PyQt中没有直接提供左键双击的判断方法,需要自己实现,其思路主要如下所示: 1、起动一个定时器,判断在指定的时间之内,点击次数超过2次,则视为双击(其主要思路判断两次点击的时间差在预测的条件以内)...2、 起动一个定时器,判断在指定的时间之内,点击次数超过2次,另外再获取鼠标点击的坐标,如果前后两次点击的坐标位置,属于同一个位置,满足这两个条件则判断为双击(其主要思路判断两次点击的时间差在预测的条件以内...self.mouse = "双击" self.isDoubleClick=True def judgeClick(self,e): if self.isDoubleClick...== False: self.mouse="左" else: self.isDoubleClick=False self.mouse = "双击" 或 from...self.timer.isActive() and e.buttons() ==QtCore.Qt.LeftButton: self.timer.stop() self.mouse="双击

    1.8K10

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

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

    2.2K20

    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)。...至此,能一定程度上避免双击(dblclick)时触发单击(click)。

    5.3K30

    关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考。...本文主要介绍解决这种冲突的方法,其实就是事件绑定的时机问题。...起初以为是 jQuery 事件绑定的问题,其实完全不相关,使用原生 JS 同样会遇到这种问题。...再看一下拖拽的事件绑定,很明显,在 document 上绑定的事件和 input range 的拖拽事件冲突了。...其实,document 作为最上层的节点,它上面不应该绑定其它事件(事件代理除外),如果绑定,必须是临时性绑定,否则一定会造成冲突

    2.3K110

    js的动态加载、缓存、更新以及复用(二)恼人的命名冲突

    有的推荐第三方框架,比如 In.js、requrieJS、sea.js、lab.js等。这个开阔了眼界,以前只知道sea.js,省去了自己搜索的麻烦。...主要看的是sea.js,目前简单的理解是:一个加载js的机制 + 模块化编程(CMD规范)的理念。这个是淘宝用的,肯定很强大、很结实了。那么我是不是拿来用呢?...我的想法就是做一个js文件服务。由这个服务实现加载js、更新js、加载顺序(依赖),还有复用。   如果我们要做五个项目,每个项目都是一个独立的站点,那么对于共用的js文件是怎么处理的呢?...我们每写一个js文件,都需要考虑要引用哪些文件吗?目前我做的项目是,由js文件服务来搞定js文件的加载,然后写点处理业务逻辑的代码就ok了。   想说的还有很多,只是思路有点乱。...引用 https://github.com/seajs/seajs/issues/547 恼人的命名冲突 我们从一个简单的习惯出发。

    2.2K80
    领券