在网页开发过程中经常遇到点击按钮之后提交表单且不能重复提交表单的问题,我总结了一下常用的解决办法:
下面模拟整个过程:
<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);
});
});