解决绝对定位元素遮挡后鼠标事件处理问题的方法

一、pointer-events 属性介绍

1. 属性值说明

pointer-events 是 CSS3 中新增的一个属性，其支持的值大多与 SVG 有关，但对我们常规 Web 开发来说，主要关注的两个值是 none 和 auto。

1.1 auto

默认情况下，当未指定 pointer-events 属性时，元素会继承 default behavior。这种情况下，元素会成为鼠标事件的目标，能够正常处理事件。

1.2 none

设置 pointer-events: none 后，该元素将永远不会成为鼠标事件的目标。然而，这种情况并不意味着该元素上的事件侦听器永远不会被触发。如果该元素的后代元素明确指定了 pointer-events 属性并允许其成为事件目标，那么指向该元素的事件在传播过程中会通过父元素，进而触发后代元素的事件侦听器。需要注意的是，位于屏幕上方的父元素和下方的后代元素之间的区域，鼠标活动不会同时捕获父元素和后代元素（除非父元素的 pointer-events 属性允许后代元素处理事件)。

2. 浏览器兼容情况

2.1 桌面浏览器

• IE: 11+（IE6-10 不支持）
• Firefox: 3.6+
• Chrome: 4.0+
• Safari: 6.0+
• Opera: 15.0+

2.2 移动设备浏览器

• iOS Safari: 6.0+
• Android Browser: 2.1+
• Android Chrome: 18.0+

二、使用样例

1. 使链接无法点击

通过设置 pointer-events: none 可以实现以下效果： - 链接无法被点击 - 没有鼠标手形效果（悬停效果也会消失） 这种方法可以避免按钮重复点击、表单重复提交等问题。

可以点击的链接         不能点击的链接

2. 让鼠标点击穿透上方的 div

场景描述： - 黄色半透明的 div 使用绝对定位覆盖在下方链接上方。 - 默认情况下，黄色区域下方的链接无法被点击。 - 通过设置 pointer-events: none 可以让鼠标事件穿透黄色 div，仍然可以点击下方链接。

航歌         hangge.com