JS- 事件监听之防止点击过快

最新推荐文章于 2025-03-24 16:21:15 发布

原创最新推荐文章于 2025-03-24 16:21:15 发布 · 574 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

110 篇文章

订阅专栏

本文介绍了一种在HTML和JavaScript中防止用户快速连续点击按钮的方法。通过使用变量作为开关，确保按钮点击事件只响应一次，直到动画或操作完成。这种方法适用于需要执行耗时操作的情况，避免了因频繁触发相同事件导致的用户体验下降。

HTML+css
在这里插入图片描述
move.js

<!-- 在body中,调用外部js文件,只要写在调用函数之前就可以 -->
<script src="./move.js"></script>

<script>
    // 阻止点击过快的思路
    // 方法1:禁用
    //   点击时,禁用button
    //   这样的方法,只对button按钮有用
    //   div,span等标签是没有作用的

    // 方法2:判断+return
    //   第一次点击执行 move()函数
    //   之后再点击,执行的是return,终止执行move()函数
    //   当运动终止之后,可以再次点击

    var oDiv = document.querySelector('div');
    var oBtn = document.querySelector('button');


    /*
        // 方法1,禁用方法
    
    
    oBtn.addEventListener('click' , function(){
        // 点击时,给button按钮添加引用属性
        // 当运动停止时,也就是旧的定时器已经清除了
        // 可以再次执行了
        // 参数3,是运动停止后,也就是清除了定时器之后,执行的程序
        //       在参数3的函数中,让 button按钮 , disabled 为 false 
        oBtn.disabled = true;
        // 代用move函数
        move(oDiv , {left:600} , function(){
            oBtn.disabled = false;
            console.log('运动停止了');
        })
    })

    */

    // 定义一个变量,类似于质数判断中的开关变量
    // 赋值原始值
    var bool = true;

    oBtn.addEventListener('click' , function(){
        // 方法1  变量是 原始值true,执行程序
        // if(bool === true){   
        //     // 就执行move()
        //     move(oDiv,{left:600},function(){
        //         // 当运行结束时,给bool,在赋值为true,可以再次点击
        //         bool = true;
        //     });
        //     // 写哪儿无所谓,只要是执行,就给变量赋值其他数值
        //     bool = '其他数值';
        // }


        // 方式2  变量不是原始值true, 执行return,终止之后的函数程序执行
        if(bool !== true){
            // 如果变量中不是原始值,就直接执行return,不再执行之后的程序
            return;
        }
        move(oDiv,{left:600},function(){
            // 当运行结束时,给bool,在赋值为true,可以再次点击
            bool = true;
        });
        bool = '随便写什么';
    })