用css实现防止按钮重复点击


原理

  • 利用pointer-events属性设置元素是否对鼠标事件做出反应

实现代码

  • 可以延申加入自定义动画
    <button class="save-button" onclick="console.log('保存')">保存</button>
    .save-button {
      animation: buttonThrottle 2s step-end forwards;
    }
    .save-button:active {
      animation: none;
    }
    @keyframes buttonThrottle {
      from {
        pointer-events: none;
      }
      to {
        pointer-events: all;
      }
    }

演示

  • 打开开发者模式,查看Console会发现每隔两秒钟之后才能触发Console打印


文章作者: Damao
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Damao !
  目录