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

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

  • 控制按钮的 loading 参数
  • 在每个需要防止重复点击的按钮操作上,使用 throttle 函数
  • 封装一个公共的按钮组件,在需要的地方使用
  • 通过css实现截流
利用动画实现 节流
  • 通过 active 鼠标点击的时候,清空动画
  • 鼠标松开时,重新启动动画 (2s 以后才能触发 onclick 事件)


    


pointer-events 属性

属性值 :all / none

  • all : 可以触发该元素绑定的监听事件 ;
  • none : 无法触发绑定的监听事件 ;
优势
  • ① 十分 简单,不需要操作 JS ;
  • ② 可以发挥 CSS 选择器 的优势,批量 设置节流
缺点
  • ① 页面刚进入,也要等动画 (animation)时间;
  • ② 可以通过控制台 ,修改样式,绕过节流 ,所以一些重要的功能,不能使用;

你可能感兴趣的:(css,css截流)