解决水印 覆盖底层事件问题

Posted 2020-09-04 跌倒不要紧，要紧的是赶快爬起来。

项目中 遇到运用水印，因为 水印 z-index 比较 大，所以会覆盖 z-index 比较小的图层 那么就导致 了 底层 的点击事件 不能点击。

 最终是用 了CSS3 pointer-events：none解决 了，因为 css 研究不透彻 结果 走了弯路。特此记录下来。

查了 下这个属性 ，贴过来以后方便看。

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
pointer-events属性有很多值，但是对于浏览器来说，只有auto和non两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。
pointer-events属性值详解
auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。
其它属性值为SVG专用，这里不再多介绍了。
浏览器兼容性
Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性但是html中不支持。好吧，

mask_div.style.pointerEvents="none";

设置　pointerEvents 为none 表示 该元素不再是鼠标事件的目标 因此 就可以忽略当前图层。这样就可以点击到当前图层的下面被覆盖的那一层了。

　　http://www.blueidea.com/tech/web/2010/7494.asp