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

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

时间： 2024-08-27 20:07:37

解决水印 覆盖底层事件问题的相关文章

学习制作iOS程序第三天：创建全局变量，预编译函数等、优化TabBarController、加入Bugly崩溃日志、解决键盘覆盖文本框的问题

十一:创建Define定义文件和pch预处理文件 1.在Define目录里创建Const.h文件,用于保存一些常用的宏命令 #define CURRENT_APPID @"" #define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) #define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) #define IS_

递归分治解决棋盘覆盖问题

package algorithm; //递归分治解决棋盘覆盖问题 public class ChessBoard { //tr棋盘左上角方格的行号 //tc棋盘左上角方格的列号 //size = 2^k棋盘规格为2^k *2^k //dr特殊方格所在的行号 //dc特殊方格所在的列号 private static int tile = 0;//L型骨牌号 public static int[][] Board = new int[100][100]; public static void ch

解决jQuery中dbclick事件触发两次click事件

首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbclick可以触发两次click事件.例如一个DOM元素div,既绑定了 click 事件,又绑定了 dblclick 事件,这两个事件分别要做独立的事情.事件处理上没有冲突,都可以各自完成各自的操作.双击的时候虽然是执行了 dblclick 事件,但是在这之前,也执行了click 事件,那么,如何来

Android监听底层事件的机制总结

研究了一上午的Android监听底层事件的机制,总结如下: 内核驱动监听硬件设备的状态和行为,通过uevent机制发送事件给用户空间: 用户空间通过UeventObserver来监听来自内核的uevent,进行处理. 内核空间和用户空间的通信使用了netlink机制. 参考的文章有: Android使用UeventObserver: http://blog.csdn.net/lushengchu_luis/article/details/9466405 http://blog.csdn.net/

解决jquey中当事件嵌套时,内层事件会执行多次的问题

出现情景:当内层事件需要外层事件触发后产生的一些值得时候 情景复现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq

JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbind('click').click(function(){ //此处填写逻辑代码 }) ------ 因为利用js在页面加载后添加需要点击事件的代码,发现在点击后会代码会执行两次,因为有toggle效果,导致弹窗出现又很快丢失 查了一些资料,发现这是冒泡的原因,需要在点击事件代码中加入阻止冒泡的方法: e.s

ArcGIS JavaScript API异常之onExtentChange事件覆盖onClick事件

利用Esri官方提供的聚合类进行聚合,由于数据较多,为了加快速度,在聚合之前对当期范围进行判断,如果不在当前视图范围的,就不聚合了. 所以,由于Esri官方的类是监听了zoomEnd事件,如下代码 this._zoomEnd = connect.connect(map, "onZoomEnd", this, function () { // update resolution if (map.spatialReference.isWebMercator()) { this._clust

解决移动端touch事件（touchstart／touchend） 的穿透问题

情景: 我们在移动端点击事件click对比touchend会有很明显的300ms的延迟,为啥? 浏览器在 click 后会等待约300ms去判断用户是否有双击行为(手机需要知道你是不是想双击放大网页内容). 如果300ms内没有再一次click,那么就判定这是一次单机行为.所以我们基本上都用(touchstart/touchend). 但是这些事件在执行完之后还会执行一次click事件(具体原因解释起来太麻烦了,这要从JS事件监听机制的根本的讲起...其实我也了解有限..) 解决: 解决方案一:

解决label点击事件触发两次问题

问题描述: 通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项.代码如下: <label> <input type="radio" name="sex" />男 </label> <label> <input type="radio" name="sex" />女 </label> 但是,此时,如果label标签有点击事件,则会触发两次.