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

版权声明:== https://github.com/fyonecon == https://blog.csdn.net/weixin_41827162/article/details/82758974

-

原生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);
}

-

猜你喜欢

转载自blog.csdn.net/weixin_41827162/article/details/82758974