如何在Html页面点击按钮提交数据后防止回车被重复提交

前言：

今天收到客户的一个奇怪BUG描述，事件描述大概如下：

客户在填完本页面的数据之后，点击顶部的“保存”按钮，弹出操作成功的提示框

问题：

这时，点击“确定”，即可关闭此Tab，回到主页面，可是客户不是用鼠标点击的“确定”按钮，而是按下了回车，这时，页面闪了一下，又弹出了操作成功的提示框，即页面数据保存了两次，查看数据库，数据确实被保存了两次

听到客户的描述，我赶紧测试了一下，果然，同样的操作保存了两次，生成了两张单子，开始陷入了沉思…

疑问：

沉思一会儿，忽然想起，页面元素在获取焦点的时候，按下回车是会触发它本身默认执行的事件的，会不会是在点击“保存”按钮后，“保存”按钮获取了焦点，然后按下回车，又触发了该按钮的默认事件？

解决方法：

带着这个疑问，进行检测，代码如下：

• 1、方法一

// 保存数据
function saveData() {
	// 防止回车再次触发按钮点击事件
	$('#btn_save').blur();
	...
	...
	...
}

即，我在点击“保存”按钮保存页面数据时，让该按钮自动失去焦点，经过测试，果然问题就解决了，保存成功后按下回车后页面数据不会重复提交了。

• 2、方法二

定义一个变量，保存提交状态

// 保存状态
var isSubmit = 0;
// 保存数据
function saveData() {
	if(1 == isSubmit){
		layer.msg('请不要重复提交！', {time: 1500});
		return false;
	}
	isSubmit = 1;
	...
	...
	...
}

即，我每次提交时，都会判断是否已经提交过了，就能防止重复提交了。

如您在阅读中发现不足，欢迎留言！！！