如何防止用户不小心多次点击按钮导致多次提交

产生原因

如果网速慢的情况下，用户点击按钮提交后，如果接口还没有返回数据的话，用户会不耐烦的再点击一次提交按钮
解决方法

最简单的解决方法就是，把所有的按钮都写成 button 元素(注意需要加上type=button属性，否则在火狐下默认是type=submit，很有可能点击后会提交表单)，如果是 div 元素的话，disabled属性是失效的
用户第一次点击按钮，将该按钮设成成禁用状态

$('button').attr('disabled', 'disabled');

这个时候，按钮的点击事件已经失效

当后台返回数据后，再把禁用属性移除

$('button').removeAttr('disabled');

这个时候，用户可以考虑是否进行再一次提交  

以上的是对于 button 按钮可以采用以上的方式 

------------------------------------------------------------------------------------------

当使用 a 标签的时候，上面的方法是无效的，并没有办法去除点击事件，而应该采用一下方法，具体是给其 style 加一个这个样式即可去除a标签的鼠标事件 

或者使用pointer-events: none

 

参考文档：

                                        https://blog.youkuaiyun.com/u011500781/article/details/53308432

pointer-events: none   https://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/              

 

转载于:https://www.cnblogs.com/wang-min/p/10304331.html