使用指针事件防止重复点击的CSS示例

前言

我们在前端有重复点击的问题。由于网络的存在，用户无法及时得到反馈。它可能会选择再次点击。

所以在这个时候，后端会有两个重复请求，这可能会导致严重的问题，特别是在发送邮件时，会增加两个重复的数据。

以前我遇到这种情况会在请求做一个要求js变量，请求是异步的，所以我会在该变量的要求开始设置为false，当请求结束后，无论成功或失败，将该变量设置为true，简单的代码：

VaR可以=真
功能发布资料（）{
如果（！CanRequest）返回
获取（URL）
然后
要求=真
}）
catch
要求=真
}）
要求= false
}

这样做没有什么错，但是考虑到在点击后把按钮放到灰上，我发现了一种防止CSS级别重复点击的方法。

下面是获取SMS验证码的示例：

获取验证码

{体
显示：flex；
身高：100vh；
}
{ #计数
保证金：汽车；
填料：10px；
宽度：100px；
border: 1px solid；
文本对齐：中心；
光标：指针；
边界半径：4px；
}
{。禁用
指针事件：无；
颜色：# 666；
}

const数= document.getelementbyid（count）
const尖= count.textcontent
count.onclick = E = > {
（111）console.log
count.classlist.add（'disable）
count.textcontent = 10
Var（setInterval）（ID = = > {
count.textcontent-—
如果（count.textcontent <= 0）{
count.classlist.remove（'disable）
count.textcontent =尖
ClearInterval（ID）
}
}，1000）
}

注意：如果您不知道指针事件知道什么，请看这篇文章。

演示链接：点击这里

总结

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一定的帮助。如果有任何疑问，您可以留言交流，谢谢您的支持。