单击事件和双击事件同时存在的处理办法

悠悠 2024-02-17 16:52 17阅读 0赞

原始的ondblclick方法在执行完两次onclick方法后执行。

所以，如果用该方法，则在click事件中要判断是否是因为双击事件触发的，一般的方法通过setTimeout，即click方法内的代码延迟执行，在执行前判断ondblclick是否执行了，如果已经执行了则不再执行click中的代码。

function CClick() {
        
        var lastClickTime = 0;
        var delay = 200;
        var status = 0; // 0:click、dbclick事件执行结束了，1：触发了click事件，2：click事件正在执行，3：dbClick事件正在执行
        var timeTask;
    
        this.click = function() {
        
            // click、dbClick事件正在执行
            if(status === 2 || status === 3) {
                return;
            }
    
            var cur = new Date().getTime();
            // 两次点击事件的间隔时间小于delay，则认为是双击事件
            if(status === 1 && (cur - lastClickTime) < delay) {
                dbclick();
                return;
            }
    
            status = 1;
            clearTimeout(timeTask); // 如果上一次的click正在执行中，则取消上次的任务。
            timeTask = setTimeout(function() {
        
                // click事件还未执行完毕或者dbClick正在执行
                if(status === 2 || status === 3) {
                    return;
                }
                status = 2;
                // do something
                status = 0
            }, delay);
        };
    
        var dbclick = function() {
        
            // dbClick事件还未执行完毕
            if(status === 3) {
                return;
            }
            status = 3;
            // do something
            status = 0;
        };
    }

使用方法：  
对每一个需要操作的元素初始化一个CClick对象，然后在onClick中调用click方法。

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关单击事件和双击事件同时存在的处理办法

原始的ondblclick方法在执行完两次onclick方法后执行。所以，如果用该方法，则在click事件中要判断是否是因为双击事件触发的，一般的方法通过setTimeou

悠悠/ 2024年02月17日 16:52/ 0 赞/ 18 阅读

相关 js实现单击事件和双击事件

一下代码可以解决单击事件和双击事件冲突的问题 //单击事件 var timeoutID = null; $("test).on('click',functi

雨点打透心脏的1/2处/ 2022年11月14日 10:16/ 0 赞/ 197 阅读

相关 Vue中，当组件同时注册单机事件（@click）和双击事件（@dblclick）时，处理事件冲突

背景：示例代码： <template> <div > <button @click="clickHandler" @dblclic

喜欢ヅ旅行/ 2022年10月18日 04:58/ 0 赞/ 376 阅读

相关 MVVM表格双击事件

做项目用到表格的地方特别多，表格做多了，就不满足只做表格了，比如，要在表格里面添加一行空数据，再比如在某一行某一列里面做个单击或者双击命令。今天，某人就想在表格里面做一个双

缺乏、安全感/ 2022年10月05日 00:51/ 0 赞/ 181 阅读

相关 MFC鼠标单击截获鼠标双击事件，且无法记录单击的数据的解决方案

MFC鼠标单击截获鼠标双击事件，且无法记录单击的数据的解决方案参考文章： [（1）MFC鼠标单击截获鼠标双击事件，且无法记录单击的数据的解决方案][1_MFC] （2）

我不是女神ヾ/ 2022年09月14日 09:19/ 0 赞/ 173 阅读

相关 Vue 框架-02-事件：点击, 双击事件,鼠标移上事件

Vue 框架-02-事件：点击, 双击事件,鼠标移上事件 1.单击事件：v-on:click ![20181107153425544.gif][] 源码 app2

朴灿烈づ我的快乐病毒、/ 2022年04月18日 02:58/ 0 赞/ 369 阅读

相关 uni-app双击事件（单击、双击互不干扰）

uni-app中绑定双击事件 > 功能需求在uni-app中，很多时候我们需要元素绑定双击事件，比如自定义的视频播放器，双击播放、暂停，但是显示进度条、隐藏进度条。

╰+哭是因爲堅強的太久メ/ 2021年10月06日 18:52/ 0 赞/ 1321 阅读

相关鼠标移入移出双击单击事件

qq交流群： 581478349 <!DOCTYPE html> <html> <head>

- 日理万妓/ 2021年09月18日 14:44/ 0 赞/ 425 阅读

相关 js鼠标单击和双击事件冲突问题的解决方法

情况一，如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件，当在这个DOM对象上发生双击事件时，第一次点击（click）会触发一次单击（

亦凉/ 2021年06月24日 14:00/ 0 赞/ 653 阅读

相关 uni-app 中 tabBar 点击或单击事件说明以及双击事件模拟

我们在使用 uni-app 开发前端时，如果应用是一个多 tab 应用，可以通过使用官方提供的原生 tabBar 来实现页面导航。那么如果我们要实现 tabBar 单击切...

朱雀/ 2021年03月23日 09:59/ 2 赞/ 6377 阅读