移动端防止阻止连续点击事件，以免重复提交表单

防止阻止连续点击事件，以免重复提交表单。

 

首先，先说问题。

 

我正在做一个电商系统 。

 

下单时，要填写收货地址，填写收货地址时，会出现收货地址出错问题。

 

首先，我们是在错误日志中，发现出错信息：

 

System.Data.DBConcurrencyException: 违反并发性: UpdateCommand 影响了预期 1 条记录中的 0 条。

 

我们开始先重现问题：

 

从上面的出错信息，可以看出，是并发的原因。

 

主要是因为，可能网络慢或可能用户点击快，导致操作记录时，在未完成更新时，记录集就被改变了导致。

 

于是，我们得避免用户多次点击。

 

我一开始，在AJAX里的beforeSend,和Complete里，加入变灰，恢复点击的代码。

 

但发现了，在进入AJAX beforeSend之前，可能就有了两个点击事件进来（意思是在点击被阻止之前，就有两个点击事件进入）

 

网上发现很多都是这样实现，但这次根本解决不了问题。

 

我用自己的手机，两个食指快速点击，根本阻止不了。

 

于是，我写下了如下代码去阻止：

 

 

其中 submitAddress方法里，有Ajax调用（异步），然后过一秒，再把按钮恢复：

 

这里关键的地方，是一开始被点击时，就把链接灰掉，（而不是在Ajax里）

 

正常情况下，过一秒再恢复给用户点击（这样的话，起码一点击，系统就阻止点击，估计这可能是花掉0.001秒的时间，如果把这个阻止放到Ajax那里

 

估计会有很多点击事件会被接收了）

 

因此这样解决更安全。

 

欢迎大家有更好的解决方法，分享。：）