CSS 点击穿透pointer-events

在项目中，当需要展示一个元素在最顶层，但又不想让它影响下层的交互，可以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，可以通过下面方法验证：

  isSupportPointerEvents() {
    var dummy = document.createElement('_');
    if (!('pointerEvents' in dummy.style)) return false;
    dummy.style.pointerEvents = 'auto';
    dummy.style.pointerEvents = 'x';
    document.body.appendChild(dummy);
    var isSupported = getComputedStyle(dummy).pointerEvents === 'auto';
    document.body.removeChild(dummy);
    return isSupported;
  }

参考列表：

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
• https://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/