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

CSS
CSS
发布日期:   2023-02-18
更新日期:   2026-09-08
文章字数:   142
阅读时长:   1 分
阅读次数:  

原理

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

CSS
  目录