CSS如何防止按钮重复点击？

函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。

在 JavaScript 中，可以使用节流（throttling）来控制事件的触发频率，以确保在一定时间内只执行一次相应的操作。对于保存按钮的点击行为，可以使用节流函数来确保在一定时间内只允许提交一次。

其实除了 JS 方式， CSS 也可以非常轻易的实现这样一个功能，无需任何框架库，一起看看吧！

一、CSS 实现思路分析

CSS 实现和 JS 的思维不同，需要从另一个角度去看待这个问题。

比如这里需要对点击事件进行限制，可以使用pointer-events;

然后是时间的限制，每次点击后需要自动禁用 300ms，可以使用animation;

除此之外，还需要有点击行为，所以必然和伪类:active有关联。

二、具体实现：CSS 动画的精准控制

假设有一个按钮，绑定了一个点击事件，这时连续点击按钮就会不断地触发：

<button onclick="console.log('保存')">保存</button>

通过 CSS 很好地限制了点击频率：

button{
  /*动画缓动函数：设置成了 step-end 阶梯曲线，它可以很方便的控制 pointer-events 的变化时间点。*/
  animation: throttle 2s step-end forwards;
}

button:active{
  animation: none;
}

@keyframes throttle {
  from {
    pointer-events: none;
  }
  to {
    pointer-events: all;
  }
}

以上关于CSS如何防止按钮重复点击？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。