JS
的 定时器 setTimeout
,来控制点击多少秒才能在触发;CSS
也能达到 「节流」 的目的,下面我们来看一下把 属性值 :all / none
all
: 可以触发该元素绑定的监听事件 ;none
: 无法触发绑定的监听事件 ;<style>
.btn {
pointer-events: none;
}
style>
<body>
<button class="btn" onclick="btnClick()"> 按钮 button>
body>
<script>
function btnClick(){ console.log(123) }
script>
既然如此 ,我们可以通过 点击后 动画(animation
), 来设置多少秒后可以触发
active
鼠标点击的时候,清空动画2s
以后才能触发 onclick
事件)<style>
.btn {
pointer-events: all;
animation: btnAnim 2s step-end forwards;
}
.btn:active {
animation: none
}
@keyframes btnAnim {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}
style>
<body>
<button class="btn" onclick="btnClick()"> 按钮 button>
body>
<script>
function btnClick(){ console.log(123) }
script>
优势 :
CSS
「选择器」 的优势,批量 设置「节流」;缺点:
animation
)时间;