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

   在网页开发过程中经常遇到点击按钮之后提交表单且不能重复提交表单的问题,我总结了一下常用的解决办法:


下面模拟整个过程:


	
		测试
		
	
	
		

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);
			});
		});



你可能感兴趣的:(防止按钮重复点击的js实现)