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，可以通过下面方法验证：

 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   }

 

参考列表：

posted @ 2021-01-21 16:08  唐宋元明清2188  阅读(425)  评论(0)  编辑  收藏  举报