首页 > 代码库 > 解决水印 覆盖底层事件问题
解决水印 覆盖底层事件问题
项目中 遇到运用水印,因为 水印 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
解决水印 覆盖底层事件问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。