常用的css一些小技巧

43 阅读1分钟

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>

待完,持续更新