浅谈pointer-events属性是什么？如何使用？

# pointer-events 是什么

pointer-events：CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target 权威解释。
简单讲 pointer-events 属性是一个指针属性，是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。

# pointer-events 如何使用

pointer-events 属性有很多值，但是对于浏览器来说，适用于HTML元素的只有三个值，其它的几个值都是针对SVG元素的（本身这个属性就来自于SVG技术，是一个SVG属性，并未在任何CSS规范中定义）。

首先看下适用于HTML元素的三个值：

pointer-events: auto | none | inherit ;

1. auto：默认值，表示指针事件已启用；此时元素会响应指针事件，阻止这些事件在其下面的元素上触发。
   效果和没有定义pointer-events属性相同，鼠标不会穿透当前层
2. none：表示在元素上禁用指针事件；此时该元素将不响应指针事件，但它下面的元素可以响应指针事件，就像元素不存在于它们之上一样。
3. inherit：表示该元素将从其父级继承其 pointer-events 值。

其他值只适用于SVG :
pointer-events: visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all ;

# 应用场景

主要是解决了elementui el-table前边固定列会遮挡住滚动条 ，左右无法拖动

1. 修改el-table__fixed样式

.el-table {
    .el-table__fixed {
        height:auto !important; 
        bottom:17px !important;  
    }
}

就是设置 bottom 值，使得不盖住滚动条。
不足：不适用与含有合计的table,如果含有合计，合计也会上移

2. 修改el-table__body-wrapper样式的层级，随便设个层级就可

 .el-table__body-wrapper{
       z-index: 2
}

解决滚动条被遮住的问题，同时含有 合计 也适用。
不足：就是表头和合计那部分有阴影，中间的部分没有阴影，不过不影响效果，问题不大。

以上两个方案显然都不是最理想的，于是想到了方案 3

3. 控制鼠标响应事件

.el-table__fixed,.el-table__fixed-right {
    pointer-events: none;
    td {
        pointer-events: auto;
    }
}