CSS3神奇的样式 pointer-events: none;解决JS鼠标事件穿透到子标签

最近做一个案例演示的时候，遇到个小问题。要获取鼠标相对标签（为了方便称呼，我们叫它parent标签）的坐标，当然要用到event.offsetX和event.offsetY。

不过，如果鼠标移动到（也可以是点击）parent的子标签（称呼它child）后，就尴尬了，event.offsetX 和 event.offsetY 就不再是相对 parent 的坐标了，而是相对 child的坐标。

举个例子：

<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>

 在A，B，C三处分别点击，输出 event.offsetX：（手点有误差，但是差不多了多少）

16
14
15

可以看到，我们事件是添加在 parent上的。

点击A，是相对 parent的坐标；

点击B，则是相对 child的坐标；

点击C，则是相对 child-child的坐标。

尴尬了~~

因为我想的是，无论点击哪个点，都应该是相对 parent的坐标才对。这个在做一些案例的时候很有用，比如拖动滑块。

网上的解决方法都是用 clientX，我也用这个方式解决了问题。

但是，可不可以不用clientX呢，因为感觉比较麻烦。

经过一番搜索，找到了一个神奇的CSS3样式：（主角登场，bgm响起~！！啦啦啦~）

 pointer-events: none; 

经查，它的意思是：除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。（此文来着MDN）。说白了，就是让标签不接受鼠标事件（含click，mousemove，mouseup之类的）。

在这里，就是不让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>

再次点击ABC三个点，发现，获取的offsetX都是相对parent的坐标了，再也不用clientX来解决这个问题了~！

完美~！