1. pointer-events
常用的属性值有:
属性值 | 描述 |
---|---|
auto | 默认值,设置该属性链接可以正常点击访问。 |
none | 元素不能对鼠标事件做出反应 |
initial | 设置该属性为它的默认值 |
inherit | 从父元素继承该属性 |
使用的场景:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用css实现节流</title>
<style>
button {
animation: throttle 2s step-end forwards;
}
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}
</style>
</head>
<body>
<button id="button">节流</button>
<script>
const buttonDom = document.getElementById('button')
buttonDom.addEventListener('click', handleClick)
function handleClick(e) {
console.log(buttonDom.innerHTML, 'buttonDom');
}
</script>
</html>
待完,持续更新