CSS3 pointer-events介绍

标签: CSS css3 pointer-events | 发表时间:2011-09-09 19:26 | 作者:神飞 Pstrey
出处:http://www.qianduan.net

其实早知道这个属性,但是一直没有去研究过。今天正好在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中不支持。好吧,还是有点儿悲催~~

相关 [css3 pointer events] 推荐:

CSS3 pointer-events介绍

- Pstrey - 前端观察
其实早知道这个属性,但是一直没有去研究过. 今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下. 嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作.

Google决定采用微软的Pointer Events规格

- - Solidot
Google与微软两大竞争对手的浏览器团队交上了朋友,他们一同聚在酒吧里把酒言欢. 喝完酒后, Chrome的工程师Rick Byers在邮件列表上高兴的宣布Blink渲染引擎将采用微软提出的Pointer Events API. Pointer Events是一套触控输入处理规格,是苹果Touch Events的竞争对手,支持Pointer Events的浏览器包括了IE和Firefox.

backbone 之事件(events)

- - 博客园_首页
  最近用 backbone 做了一个项目,加深了对前端mvc理解. 一定要应用的熟练后,了解其思想后,再去阅读源码. 想写写自己对backbone的感悟. 接下来第一步就是backbone的event.   backbone的event 是其核心.  当我们user调用create 就会触发change事件.

Server-Sent Events 教程

- - 阮一峰的网络日志
服务器向浏览器推送信息,除了 WebSocket,还有一种方法:Server-Sent Events(以下简称 SSE). 严格地说, HTTP 协议无法做到服务器主动推送信息. 但是,有一种变通方法,就是服务器向客户端声明,接下来要发送的是流信息(streaming). 也就是说,发送的不是一次性的数据包,而是一个数据流,会连续不断地发送过来.

Google+Events使用体验

- - 爱谷地
Google在最新的的 Google I/O上发布了Google+ Events功能,此项目针对活动的计划组织、实时参与、活动总结几个阶段,提供了方便的图、文、视频互动功能,同时与Google Calencar以及Youtube紧密结合,意图打造一个线上活动组织平台. 同时结合Google+方便的圈子功能及隐私控制,用户可以很好的设计活动的参与模式.

Hillcrest发布Scoop Pointer空间鼠标

- MZ - cnBeta.COM
Hillcrest Labs刚刚宣布了一款名叫Scoop Pointer的空间输入设备,它可用于Mac和PC,这种像鼠标又像Wii手柄的设备内置了6轴空间感应装置,同时又有磁性和惯性传感器. 内置滚轮和9个可编程按钮,可以当成遥控器,也可以当成鼠标,更可以在高清电视上实现对游戏机的操控,可谓玩法多样,这款产品的售价79美元,价格虽然不贵但目前对它提供支持的合作伙伴并不多.

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意,但易用性明显提高了许多. 利用这个,我们可以对某个元素进行旋传,缩放,倾斜与位移,并且区分元素类型,无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

CSS3 代码生成工具:Create CSS3

- - 我爱水煮鱼
CSS3 具有相当多的新增属性,而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久,各个浏览器厂商还在开发中,有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂,一旦写错就会导致出现问题. 为此,有人开发了一个生成 CSS3 代码的工具 Create CSS3.

CSS3 文字渐变

- slackware - 前端观察
之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可.

用css3写个logo

- 丸子 - 崔凯,前端开发
演示地址:http://uicss.cn/css3/maxthon-logo.html. 先画一个外框 width: 240px; height: 240px;border-radius: 120px;. 填充背景色background:#b1e4ff;. 描边border:2px solid #789cb6;.