巧妙实现防止按钮重复点击

在项目开发中，经常会有防重复点击的优化操作，我们可能会使用以下几种方式来实现：

• 控制按钮的 loading 参数
• 在每个需要防止重复点击的按钮操作上，使用 throttle 函数
• 封装一个公共的按钮组件，在需要的地方使用

• 通过css实现截流

利用动画实现 节流

• 通过 active 鼠标点击的时候，清空动画
• 鼠标松开时，重新启动动画 （2s 以后才能触发 onclick 事件）

      按钮 

pointer-events 属性

属性值 ：all / none

• all : 可以触发该元素绑定的监听事件 ；
• none : 无法触发绑定的监听事件 ；

优势

• ① 十分 简单，不需要操作 JS ；
• ② 可以发挥 CSS 「选择器」 的优势，批量 设置「节流」；

缺点

• ① 页面刚进入，也要等动画 （animation）时间；
• ② 可以通过控制台 ，修改样式，绕过节流 ，所以一些重要的功能，不能使用；