首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击

Sonder
2023-02-10
618字
2分钟
浏览 (1.2k)

640 1.gif
复制代码
<h4>打开控制台查看</h4>
<button onclick="console.log('保存1')">我是“普通”保存</button>
  <button class="throttle" onclick="console.log('保存2')">我是“节流”保存</button>
复制代码
body {
 display: grid;
 place-content: center;
 height: 100vh;
 margin: 0;
 gap: 15px;
 background: #f1f1f1;
 user-select: none;
}
button {
 user-select: none;
}
.throttle {
 animation: throttle 2s step-end forwards;
}
.throttle:active {
 animation: none;
}
@keyframes throttle {
 from {
   pointer-events: none;
   opacity: .5;
 }
 to {
   pointer-events: all;
   opacity: 1;
 }
}
下一篇 / elementui树数据 子数据同级只能选择一个

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)