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

最新推荐文章于 2023-03-28 16:07:43 发布

_李大爷_

最新推荐文章于 2023-03-28 16:07:43 发布

阅读量1.1w

点赞数 1

本文链接：https://blog.csdn.net/liyi109030/article/details/35782513

版权

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

下面模拟整个过程：

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