一个避免用户重复点击按钮造成重复数据的小技巧

    <script>
        //启用遮罩
        function SetEstopForButton(buttionId) {
            if ($("#btnEstop")[0] == null) {
                $("#" + buttionId).after("<div id='btnEstop' style='z-index:999999;position:absolute;background-color:#ccc;filter:Alpha(Opacity-30);background:url(/images/ui-bg_flat_0_aaaaa_40x100.png) #aaaaaa repeat-x 50% 50%;opacity:0.3;'></div>");
                $("#btnEstop").css("width", ($("#" + buttionId).outerWidth() + 4));
                $("#btnEstop").css("height", ($("#" + buttionId).outerHeight() + 4));
                $("#btnEstop").css("left", ($("#" + buttionId).offset().left - 2));
                $("#btnEstop").css("top", ($("#" + buttionId).offset().top - 2));
            }
        }

        //移除遮罩
        function RemoveEstopForButtton() {
            $("#btnEstop").remove();
        }

        //是否已经点击了按钮
        var _isChickButton = false;

        function IR_StopContinuteClick(fun, buttonId) {
          
            if (typeof (fun) != "function") {
                return false;
            }

            //先判断是否已经点击了
            if (_isChickButton) {
                return false;
            }
            _isChickButton = true;

            //设置提交按钮不可编辑
            SetEstopForButton(buttonId);

            if (!fun()) {
                //恢复提交按钮编辑
                RemoveEstopForButtton();
                _isChickButton = false;
            }
            return true;
        }

    </script>

    <script type="text/javascript">

        function CheckData() {

            return IR_StopContinuteClick(DoCheck, "myBtn");

        }

        function DoCheck() {
            var username = document.getElementById("userName").value;
            if(username=="") {
                return false;
            }
            return true;
         }
    </script>

 

<form id="form1" runat="server">
    <div>
        <input id="userName" />
        <input type="button" value="提交"  id="myBtn" onclick="return CheckData()"/>
        <input value="启用遮罩" onclick="SetEstopForButton('myinput')" id="myinput" type="button" />
        <input value="移除遮罩" onclick="RemoveEstopForButtton()" id="Button1" type="button" />
    </div>
    </form>