回答

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或c，怎么办呢，一种解决办法是clientX，代码变成这样

<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.clientX);
    });
</script>

但是，如果不用clientX怎么解决这个问题呢？

pointer-events: none; 可以解决这个问题
 

如果我们就是不让child和child-child接受鼠标点击事件，那给它们的样式添加 pointer-events，代码修改后为：

<style>
     .parent{
        width:400px;
        height:400px;
        padding: 50px; 
       margin:100px;
       background:#f20; 
     }
    .child{
        width:200px;
        height:200px;
        padding:50px;
        background:#ff0; 
       pointer-events: none;   /* 不接受鼠标事件 */
    }
    .child-child{
        width:50px;
        height:50px;
        background:#00d; 
        pointer-events: none;   /* 不接受鼠标事件 */
     }
</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>