pointer-events属性值详解
其实早知道这个属性,但是一直没有去研究过。今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下。嗯,其实这是个比较简单的CSS3属性。
在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作。。。
然后正好在Google map见到了类似的问题,拿来当例子来说:
Google map中左上角的操作区域占位是挺大的,如红色框区域,然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置 pointer-events:none,然后你就会发现下面的地图就可以拖动和点击了。
但是悲剧的是,操作区域本身却无法操作了,直接被无视掉了。不过不用担心,我们可以给里面的元素重新设置为 pointer-events:auto,当然,只给需要操作的元素区域设置。
貌似有点儿纠结,不过这样可以保证地图本身的可操作区域最大化。
嗯,上面只是个简单的例子,来看下具体用法:
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中不支持。好吧,还是有点儿悲催~~
转自:http://www.poluoluo.com/jzxy/201109/142876.html
pointer-events属性值详解的更多相关文章
- CSS3教程:pointer-events属性值详解 阻止穿透点击
转:http://www.poluoluo.com/jzxy/201109/142876.html 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样 ...
- css3 box-sizing属性值详解
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,border和padding不计算入widt ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- Delphi中TStringList类常用属性方法详解
TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...
- js原生之scrollTop、offsetHeight和offsetTop等属性用法详解
scrollTop.offsetHeight和offsetTop等属性用法详解:标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容 ...
- Android——TextView属性XML详解
Android_TextView属性XML详解 博客分类: android 属性名称 描述 android:autoLink 设置是否当文本为URL链接/email/电话号码/map时 ...
- scrollTop、offsetHeight和offsetTop等属性用法详解--转转转
scrollTop.offsetHeight和offsetTop等属性用法详解: 标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼 ...
- ARC声明属性关键字详解(strong,weak,unsafe_unretained,copy)
ARC声明属性关键字详解(strong,weak,unsafe_unretained,copy) 在iOS开发过程中,属性的定义往往与retain, assign, copy有关,我想大家都很熟悉了, ...
- ES6 类(Class)基本用法和静态属性+方法详解
原文地址:http://blog.csdn.net/pcaxb/article/details/53759637 ES6 类(Class)基本用法和静态属性+方法详解 JavaScript语言的传统方 ...
随机推荐
- github 上中国互联网公司的开源项目
github上 那个 watch和 follow功能 不太好用啊. 是我用的 不好,还是 怎么的.有时候 找不到 watch 和 follow. 秉持 开源 精神,省的大家 和 我 查找. 我只关注 ...
- Mybatis 拦截器报错org.apache.ibatis.executor.statement.StatementHandler.prepare(java.sql.Connection)
出现此错误的原因是MyBatis 3.4.0 之后,StatementHandler的prepare方法做了修改,如下: 在args = { Connection.class }中添加第二个参数,即 ...
- Java中String、StringBuffer和StringBuilder之间的区别
String在Java中是字符串常量 例如 String str = "abc"; str = str + 1; System.out.println(str); 结果将是abc1 ...
- mvc权限验证--AuthorizeAttribute
在做后台管理时用户登录后就需要验证哪些权限了,没有登录的就直接退出到登录页面. 系统有自带的权限[Authorize],可用于几个地方: 1.将属性[Authorize]置于相关的action上方,验 ...
- dataset数据导出到Excel
1.将数据写入HTTP输出流/这样子导出以后的数据全在一行中 public void CreateExcel(DataSet ds, string FileName) { HttpResponse r ...
- 一个简单的HTML病毒分析
一直就想写这篇东西了,仅仅是上班时说要上班,不写.回家后又忙着玩游戏,丢一边去了.如今仅仅好不务正业的开写了.希望头儿不会知道我的blog.哈哈 在非常久之前就对HTML的病毒非常感兴趣了,非常好奇怎 ...
- [BZOJ2049] [SDOI2008] 洞穴勘测
题目描述 辉辉热衷于洞穴勘测. 某天,他按照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘测,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通道组成,并且每条通道连接了恰好两个洞穴.假 ...
- ThinkPHP 3.2.x 集成极光推送指北
3.2版本已经过了维护生命周期,官方已经不再维护,请及时更新至5.0版本 -- ThinkPHP 官方仓库 以上,如果有条件,请关闭这个页面,然后升级至 ThinkPHP 5,如果由于各种各样的原因无 ...
- luogu4383 [八省联考2018]林克卡特树(带权二分+dp)
link 题目大意:给定你 n 个点的一棵树 (边有边权,边权有正负) 你需要移除 k 条边,并连接 k 条权值为 0 的边,使得连接之后树的直径最大 题解: 根据 [POI2015]MOD 那道题, ...
- leetcode-551-Student Attendance Record I(判断是否出现连续几个相同字符)
题目描述: You are given a string representing an attendance record for a student. The record only contai ...