请问pointer-events: none有什么作用？

pointer-events: none; 指示该元素不是鼠标事件的目标，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。说白了，就是让目标标签不接受鼠标事件（含click，mousemove，mouseup之类的）。我们来举个例子：

<style>
    .parent {
        width: 400px;
        height: 400px;
        padding: 50px;
        margin: 100px;
        background: #f20;

    }
    .child {
        width: 200px;
        height: 200px;
        padding: 50px;
        background: #ff0;
    }
    .child-child {
        width: 50px;
        height: 50px;
        background: #00d;
    }
</style>

<div class="parent" id="parent">
    <div class="child">
        <div class="child-child">

        </div>
    </div>
</div>

<script>
    let  parent = document.getElementById("parent");
    parent.addEventListener("click", function(event) {
        console.info(event.offsetX);
    });
</script>

可以看到，我们事件是添加在 parent上的。但是点击鼠标到b或c上的时候相对的坐标变成了b...

点击查看剩余70%