遮罩层，绝对定位元素导致无法触发点击事件的解决办法

问题

在没有背景和图片填充的情况下，Firefox 和Chrome 下不能直接点击绝对定位层下的元素（比如连接，按钮），下面的元素会被上面的绝对定位层挡住。IE下可以直接点击绝对定位层下面的元素。

解决办法

对于这种问题需要用到一个CSS3的属性，可以通过给绝对定位的层多加一个样式：" pointer-events:none; " 这样绝对定位层下的元素就可以点击了。

这其中有一个需要注意的地方，如果在绝对定位层上存在能够点击的元素，在添加" pointer-events:none; " 后将同样不起作用。

为了避免此情况，可以给需要操作的元素设置" pointer-events:auto" 即可。

属性介绍

pointer-events: auto | none | visiblePainted | visbleFill |
visibleStroke | visible | painted | fill | stroke | all | inherit

常用的只有 auto / none 两个属性值，其他的是针对 SVG 的。

auto：

效果和没有定义" pointer-events:none; " 属性相同，鼠标不会穿透当前层。在SVG中，该值和 visiblePainted 的效果相同。

none：

元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面层中的元素。但是如果它的子元素设置了" pointer-events" 的其他属性值，比如 auto，鼠标事件仍会监听这个子元素。