js实现单击事件、连续事件，两次以上自己去判断添加

最新推荐文章于 2024-03-21 11:28:52 发布

我来秋风扫落叶

最新推荐文章于 2024-03-21 11:28:52 发布

阅读量812

点赞数 1

分类专栏： Web前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_15038701/article/details/116924334

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js种实现单击事件、连续事件以及其他事件，防止事件穿透。

华为鸿蒙版本的在我的文章列表中，原生Java语言实现单击、连续点击事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试单击双击事件</title>
</head>
<body>
<button onclick="singleSeries()">点击测试</button>
<script>
    //计时器
    let timer = null;
    //延迟时间
    let waitTime = 200;
    //计数
    let count = 0;
    //上一次时间：默认值打开为当前打开页面时间
    let lastTime = new Date().getTime();

    //单击事件和连续事件
    function singleSeries() {
        let currentTime = new Date().getTime();
        let cha = currentTime - lastTime;
        //该段判断逻辑是防止setTimeout种是连续的时候count计数等于0的时候出现了连续事件偶发出现单击事件
        if (cha < waitTime) {
            if (count == 0) {
                //防止偶发出现单击事件，将数值加1跳出判断1的条件避免事件冲突
                count = count + 2;
            } else {
                //连续事件直接加1
                count = count + 1;
            }
        } else {
            //单击事件
            count = 1;
        }
        lastTime = new Date().getTime();
        // clearTimeout(timer);//如果需要判断点击几次的请打开该注解，阻止连续事件产生。具体实根据下面(code do)现自己想要逻辑可以
        timer = setTimeout(function () {
            clearTimeout(timer);
            //判断点击次数
            if (count == 1) {
                //code do
                console.log("单击事件")
            } else {
                //code do
                console.log("连续事件")
            }
            count = 0;
        }, waitTime);
    }

    //执行方法
    // document.getElementById("事件绑定id").addEventListener('click', singleSeries)
</script>
</body>
</html>

我来秋风扫落叶

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现单击事件、连续事件，两次以上自己去判断添加

js种实现单击事件、连续事件以及其他事件，防止事件穿透。<script> //计时器 let timer = null; //延迟时间 let waitTime = 200; //计数 let count = 0; //上一次时间：默认值打开为当前打开页面时间 let lastTime = new Date().getTime(); //单击事件和连续事件 function singleSeries() {
复制链接

扫一扫