首页 > 代码库 > 解决水印 覆盖底层事件问题

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

项目中 遇到运用水印,因为 水印 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

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