您的位置：首页 > Web前端 > JavaScript

防止按钮重复点击的js实现

2014-06-29 12:58 1166 查看
在网页开发过程中经常遇到点击按钮之后提交表单且不能重复提交表单的问题，我总结了一下常用的解决办法：

下面模拟整个过程：

<html>
<head>
<title>测试</title>
<meta charset="utf-8">
</head>
<body>
<form>
<input id="btn-submit" type="button" value="提交">
</form>
</body>
<script>
function fncSubmit(){
setTimeout(function(){
alert('提交表单');
},1000);
}
document.getElementById('btn-submit').onclick = fncSubmit;
</script>
</html>


1 原生js控制

提交按钮点击之后，禁用按钮

function fncSubmit(){
setTimeout(function(){
alert('提交表单');
},1000);
this.disabled = true;
}


触发点击事件之后，覆盖原来的点击事件方法

function fncSubmit(){
setTimeout(function(){
alert('提交表单');
},1000);
this.onclick = function(){};
}




给按钮添加变量标志

function fncSubmit(){
if(!this.isSubmit){
setTimeout(function(){
alert('提交表单');
},1000);
}
this.isSubmit = true;
}


2 jquery 解绑点击事件

触发点击事件之后，在方法内解绑jquery对象的绑定事件

$(function(){
$('#btn-submit').click(function(){
setTimeout(function(){
alert('提交表单')
});
$(this).unbind('click',arguments.callee);
});
});

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航