魔工坊

阿度

前端工程师


发布者资料

  • 性别: 帅哥
  •  地区: 北京
  • 认证: 魔客 [魔客第4年]  
  • 日期: 2015-08-25 13:25:59

教程标签云


教程分类


推荐教程


同类教程

1567

CSS3 pointer-events为更好的事件控制而生


其实早知道这个属性,但是一直没有去研究过。今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下。嗯,其实这是个比较简单的CSS3属性。

在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作。。。

然后正好在Google map见到了类似的问题,拿来当例子来说:

gmap.jpg

Google map中左上角的操作区域占位是挺大的,如红色框区域,然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置 pointer-events:none,然后你就会发现下面的地图就可以拖动和点击了。

但是悲剧的是,操作区域本身却无法操作了,直接被无视掉了。不过不用担心,我们可以给里面的元素重新设置为 pointer-events:auto,当然,只给需要操作的元素区域设置。

貌似有点儿纠结,不过这样可以保证地图本身的可操作区域最大化。

嗯,上面只是个简单的例子,来看下具体用法:

pointer-eventsauto | none | visiblePainted | visibleFill | visibleStrokevisible | painted | fill | stroke | all | inherit

pointer-events 属性有很多值,但是对于浏览器来说,只有 auto 和 none 两个值可用,其它的几个是针对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中不支持。

blob.png

-魔工坊也有使用额-

喵,赏1块零钱,给我家喵星人买罐头吧 :)

赞赏支付方式:

赞赏

赞赏

赞赏

 

[ 教程搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 关闭窗口 ]

魔友吐槽

浏览上篇

浏览下篇

发布教程

魔工坊系统提示