用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打印

保存