原生js实现双击、三击甚至更多击事件，默认[1, 10]击

最新推荐文章于 2025-02-28 10:39:34 发布

userxxcc

最新推荐文章于 2025-02-28 10:39:34 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： js/大前端

本文链接：https://blog.youkuaiyun.com/weixin_41827162/article/details/82758974

js/大前端专栏收录该内容

42 篇文章

订阅专栏

原生js实现双击、三击甚至更多击事件，默认[1, 10]击，再多击就无意义了。

/*
* 实现自定义的N次连续点击
* many_click(_click_num, call_func)
* 必填：_click_num 点击次数 [1, 10]
* 必填：call_func 回调函数
* */
let click_before_time = 0;
let click_num = 0;
function many_click(_click_num, call_func){
    // 安全校验
    if (typeof _click_num !== "number"){ console.info("many_click(_click_num, call_func)的点击次数为number类型"); return; }
    if (!call_func){console.info("many_click(_click_num, call_func)无回调函数"); return;}
    // 处理click_num的新值情况
    if(click_num === 0){
        click_num = _click_num;
    }else {
        if (click_num < 1 || click_num > 10){ click_num = 1; } /*只准1击至10击，其他情况默认1击*/
    }
    // 处理点击之时差
    let click_time = Date.parse(new Date())+(new Date()).getMilliseconds(); // 毫秒时间戳
    if( (click_time - click_before_time) < 400 ){ // 下一次点击是否成功
        click_before_time = Date.parse(new Date())+(new Date()).getMilliseconds(); click_num--;
    }else{ // 第一次点击
        click_before_time = Date.parse(new Date())+(new Date()).getMilliseconds();
        if(click_num < _click_num){ /*清除历史不成功点击的参数*/
            click_num = _click_num;
        }
    }
    // N次成功点击后启用回调函数，并初始化click_num
    if (click_num === 1){
        call_func("回调函数不需要传参"); click_num = 0; /*初始化点击次数*/
    }
}

调用举例：

/*
* 双击
* */
function two_click(call_func) {
    many_click(2, call_func);
}

/*
* 三击
* */
function three_click(call_func) {
    many_click(3, call_func);
}