JS控制按钮防止多次点击

最新推荐文章于 2025-06-27 11:30:48 发布

原创最新推荐文章于 2025-06-27 11:30:48 发布 · 5.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #防止重复点击

前端-CSS/JS/JQuery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现的防止按钮被短时间内重复点击的方法。该方法利用全局变量标识符来判断按钮是否已被点击，并通过setTimeout函数设定在一定时间后重置按钮状态，确保用户体验的同时避免了因误操作导致的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        // 按钮防止短时间多次点击
        //全局变量标识
        var CLICKTAG = 0;

        function button_onclick(pElement){
            if (CLICKTAG == 0) {  
                CLICKTAG = 1;  
                pElement.disabled=true;
                // 等待3s后重置按钮可用
                setTimeout(function () { CLICKTAG = 0 ; pElement.disabled=false;}, 3000);  
            }
        }
    </script>
</head>

<body>
    <input type="button"  style="width:125px;height:25px;" value = "点击" onclick="button_onclick(this)" ></button>
</body>
</html>