在项目中，当需要展示一个元素在最顶层，但又不想让它影响下层的交互，可以pointer-events：none
pointer-events介绍
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
属性值auto 、none用于元素是否可以接收事件，上面其它的属性和我们没关系，是svg相关的。
- auto — 默认值auto，鼠标不会穿透当前层。
- none — 元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。
pointer-events使用
1. auto和none可以配合着用
比如一个环形饼图的组件，环外和环内点击时触发的是下层元素，就可以先在组件的环外、环上、环内元素上，依次设置none、auto、none。
2. 有些场景使用pointer-events：none，非常有效。
- <a>标签，设置了自动跳转，通过设置pointer-events就可以动态禁用<a>的点击事件。
- 滚动列表需要一个渐变色蒙层，这个蒙层又不能影响列表的操作 -- 设置 pointer-events就很有用
pointer-events兼容性
chrome、Edge是支持的，IE要11。
IE9等某些浏览器不支持，浏览器是否支持pointer-events，可以通过下面方法验证：
1 isSupportPointerEvents() { 2 var dummy = document.createElement('_'); 3 if (!('pointerEvents' in dummy.style)) return false; 4 dummy.style.pointerEvents = 'auto'; 5 dummy.style.pointerEvents = 'x'; 6 document.body.appendChild(dummy); 7 var isSupported = getComputedStyle(dummy).pointerEvents === 'auto'; 8 document.body.removeChild(dummy); 9 return isSupported; 10 }
参考列表：