css的鼠标穿透

我们在 HTML 开发时可能会遇到这样的情况：页面上有一些元素使用 绝对定位 布局，这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部。默认情况下，下方元素被遮挡的部分是不会响应鼠标事件的。

但有时我们可能需要被遮盖住的元素仍然能够处理鼠标事件。 比如：我们在一个地图组件上覆盖了一个显示信息的元素，但又不想让这个信息面板影响下方地图的拖动等操作。那么我们可以使用一个叫 pointer-events 的 css 属性来实现。

pointer-events 属性介绍

pointer-events是 CSS3 中新增的一个属性，其支持的值大多都与 SVG 相关，我们不用理会。对我们来说，主要关注：none/auto 这两个属性值。

auto：与 pointer-events 属性未指定时的表现效果相同。

none：该元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。

pointer-events:none 注意事项：

使用 pointer-events:none 来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。

如果元素后代明确指定了 pointer-events 属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。

当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。

用法

给定位的盒子设置 pointer-events: none ;

给定位盒子有需要点击事件的子盒子设置 pointer-events: auto；