JS 防止重复点击提交

最新推荐文章于 2024-07-31 20:26:37 发布

曹振华

最新推荐文章于 2024-07-31 20:26:37 发布

阅读量902

点赞数

分类专栏： javascript 文章标签： JS 双击重复提交

javascript 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript">
        function consoleLog() {//输出日志
            console.log(getCurrentDateTime());
        }
        function doubleClick() {//两次调用测试按钮
            var button1 = document.getElementById('test');
            button1.onclick();
            button1.onclick();
        }
        function getCurrentDateTime() {//获取当前时间
            var myDate = new Date();
            return myDate.toLocaleTimeString();
        }
        var date = new Array();
        function disableButton(button, validateGroup) {//设置在指定时间按钮无法双击
            date.push(new Date());
            if (date.length > 1
                    && (date[date.length - 1].getTime() - date[date.length - 2].getTime() < 1000))//小于1秒则认为重复提交
            {
                event.cancelBubble = true; //测试时发现，如果直接单独设置cancelBubble、或者returnValue来取消事件，经常取消不了，依然存在重复提交的可能。因此只好用返回值来实现手工控制！
                return false;
            }
            if (typeof (Page_ClientValidate) == 'function'
                    && ((validateGroup == undefined && Page_ClientValidate() == false)
                            || (validateGroup != undefined && Page_ClientValidate(validateGroup) == false))) { //如果指定了ValidateGroup，则只验证改组；如果未指定，则验证全部验证控件
                return false;
            }

            button.disabled = true;
            return true;
        }
    </script>
</head>
<body>
    <div>
        <input id="test" type="button" onclick="if (!disableButton(this)) return false; consoleLog();" value="测试按钮" />
        <input type="button" onclick="doubleClick();" value="双击调用测试按钮" />
    </div>
</body>
</html>