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语言的传统方 ...
随机推荐
- 从swing分发线程机制上理解多线程[转载]
本文参考了 http://space.itpub.net/13685345/viewspace-374940,原文作者:javagui 在多线程编程当中,总会提到图形编程,比如java中的swing, ...
- VS2010 solution中完美的相对路径引用方法
假设您有一个工程叫solar,路径结构是这样的: 公用头路径: d:\solar\public\include公用库路径:d:\solar\public\libmars项目 : d:\solar\ma ...
- [java]基于UDP的Socket通信Demo
java课编程作业:在老师给的demo的基础上实现客户端发送数据到服务器端,服务器端接受客户端后进行数据广播. 整体功能类似于聊天室,代码部分不是太难,但是在本机测试的时候出现这样的问题: 服务端通过 ...
- fdisk 磁盘分区
.[root@test4 ~]# fdisk /dev/sda //对sda磁盘进行分区 Device contains neither a valid DOS partition table, no ...
- “全栈2019”Java第八十三章:内部类与接口详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- Python一篇学会多进程
阅读目录 1. Process 2. Lock 3. Semaphore 4. Event 5. Queue 6. Pipe 7. Pool 序. multiprocessing python 中的多 ...
- [ActionScript 3.0] AS3 弹性运动
package com.views { import flash.display.Sprite; import flash.events.Event; import flash.geom.Point; ...
- jquery源码解析:each,makeArray,merge,grep,map详解
jQuery的工具方法,其实就是静态方法,源码里面就是通过extend方法,把这些工具方法添加给jQuery构造函数的. jQuery.extend({ ...... each: function( ...
- jqury表单验证
结合天天生鲜的用户注册页面,学习验证表单js register.js--表单验证源码 $(function(){ var error_name = false; var error_password ...
- HTML5 调用百度地图API地理定位
<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...