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

小鱼儿 2021-10-14 00:30 920阅读 0赞

**前言：**

今天收到客户的一个奇怪BUG描述，事件描述大概如下：  
![表单页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70]  
客户在填完本页面的数据之后，点击顶部的“保存”按钮，弹出操作成功的提示框  
![操作成功][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70 1]  
**问题：**

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

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

**疑问：**

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

**解决方法：**

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

*  1、方法一

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

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

*  2、方法二

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70]: /images/20211013/5d7d599198104e8c9cf44c202f4bc70d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70 1]: /images/20211013/01225e5410f94d1783803324e76a2868.png