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如何防止按钮重复点击?
码云笔记 » CSS如何防止按钮重复点击?