# pointer-events 是什么
pointer-events：CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target 权威解释。
简单讲 pointer-events 属性是一个指针属性，是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。
# pointer-events 如何使用
pointer-events 属性有很多值，但是对于浏览器来说，适用于HTML元素的只有三个值，其它的几个值都是针对SVG元素的（本身这个属性就来自于SVG技术，是一个SVG属性，并未在任何CSS规范中定义）。
首先看下适用于HTML元素的三个值：
pointer-events: auto | none | inherit ;
-
auto：默认值，表示指针事件已启用；此时元素会响应指针事件，阻止这些事件在其下面的元素上触发。
效果和没有定义pointer-events属性相同，鼠标不会穿透当前层 -
none：表示在元素上禁用指针事件；此时该元素将不响应指针事件，但它下面的元素可以响应指针事件，就像元素不存在于它们之上一样。 -
inherit：表示该元素将从其父级继承其pointer-events值。
其他值只适用于SVG :
pointer-events: visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all ;
# 应用场景
主要是解决了elementui el-table前边固定列会遮挡住滚动条 ，左右无法拖动
- 修改el-table__fixed样式
.el-table {
.el-table__fixed {
height:auto !important;
bottom:17px !important;
}
}
就是设置 bottom 值，使得不盖住滚动条。
不足：不适用与含有合计的table,如果含有合计，合计也会上移
- 修改el-table__body-wrapper样式的层级，随便设个层级就可
.el-table__body-wrapper{
z-index: 2
}
解决滚动条被遮住的问题，同时含有 合计 也适用。
不足：就是表头和合计那部分有阴影，中间的部分没有阴影，不过不影响效果，问题不大。
以上两个方案显然都不是最理想的，于是想到了方案 3
- 控制鼠标响应事件
.el-table__fixed,.el-table__fixed-right {
pointer-events: none;
td {
pointer-events: auto;
}
}
