CSS3 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中不支持。好吧,还是有点儿悲催~~

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索鼠标
, 地图
, 属性
, 监听
, 元素
, 区域
pointers
css3 pointer events、css3 pointerevents、pointer events、pointer events none、pointer events属性,以便于您获取更多的相关知识。

时间: 2024-12-04 17:01:46

CSS3 pointer-events介绍的相关文章

Chrome浏览器将支持Pointer Events标准,改善触控操作支持

新浪科技讯 北京时间3月26日上午消息,周三宣布,计划使Chrome浏览器支持Pointer Events标准,从而带来更好的滚动效果,并改善对触控操作的支持. Pointer Events标准最初被应用在IE浏览器中.微软.Mozilla和Opera均采用了Pointer Events.此前,谷歌专注于对Touch Events的支持,而Touch Events此前被用于Safari浏览器中. 谷歌表示,基于用户社区的反馈,该公司计划对Chrome浏览器做出这一调整.通过Pointer Eve

jQuery Animation实现CSS3动画示例介绍_jquery

jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red").详细用法请参考jQuery 效果 - animate()方法和官方教程. 像CSS3好多效果因为不是数值的,所以是没有办法直接通过animate()方法实现的.如translate(), ro

使用CSS3和jQuery制作可伸缩的搜索条

搜索条在我们网站是必不可少的,尤其是在有限的页面空间里,放置一个重要的搜索条是个难题,今天我将结合实例给大家介绍一下如何使用CSS3和jQuery来实现一个可伸缩功能的搜索条. HTML 在需要放置搜索条的页面中放置如下html代码,搜索条#search_bar包含一个form#myform表单,表单中放置一个搜索输入框#search,一个搜索按钮.search_btn以及搜索按钮图标.search_ico. <div id="search_bar" class="se

CSS3的transform知识:详解transform

文章简介:在这篇文章,回顾了CSS3的transform的基本知识,然后深入介绍了transform-origin的相关知识. 在CSS2.1中,我们的页面都是静态的,网页设计师也习惯把它作为页面效果的设计工具.但往往有些页面效果不只是静态的,比如说,如何实际移动一些元素?如何更改元素的外观--旋转或缩放? 多年来,Web设计师为了给修改页面的外观,都依赖于图片.Flash或JavaScript才能完成.不过,CSS3将要改变设计师这种思维,进入CSS3时代,借助CSS3就可以轻松倾斜.缩放.移

css的pointer

是否曾经有过这样的经历:把一个元素置于另一个元素之上,而希望下面的那个元素成为可点击的?现在,利用css的pointer-events属性即可做到. CSS pointer-events Pointer-events原本来源于SVG,目前在很多浏览器中已经得到体现.不过,要让任何HTML元素生效还得借助于一点点css.该属性称之为pointer-events,基本上可以将它设置为auto,这是正常的行为,而"none"是一个有趣的属性. 将它应用到一个元素 如果你已经设置一个元素的cs

我的Android进阶之旅------&amp;gt;WindowManager.LayoutParams介绍

本文转载于: http://hubingforever.blog.163.com/blog/static/171040579201175111031938/ 本文参照自: http://developer.android.com/reference/android/view/WindowManager.LayoutParams.html http://blog.sina.com.cn/s/blog_4b3c1f950100qd9s.html public static class WindowM

HTML5 &amp; CSS3初学者指南(4) – Canvas使用

介绍 传统的HTML主要用于文本的创建,可以通过<img>标签插入图像,动画的实现则需要第三方插件.在这方面,传统的HTML极其缺乏满足现代网页多媒体需求的能力.HTML5的到来,带来了新的成员<canvas>标签.   什么是 Canvas? HTML5 的 Canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,你可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法.   创建 Canvas 元素 向 HTML5

阿里云前端周刊 - 第 14 期

推荐 1. JavaScript 在嵌入式设备与物联网中的应用现状 https://auth0.com/blog/javascript-for-microcontrollers-and-iot-part-1/?utm_source=newsjs&utm_medium=sc&utm_campaign=javascript_microcontrollers 随着近年来 Web 的发展与 JavaScript 的崛起,JavaScript 被应用到了许多原本不曾想象到的场景中,从服务端.工作站.

探索IE11下Dojo事件处理遇到的一些“怪象”

事件响应为 Web 应用提供了良好的交互式体验支撑,事件,即抓取某个人们关心的 UI 变化.键盘操作.鼠标操作等,当该事件被浏览器发出时,编程人员可以捕获该事件然后做一些特定的合乎逻辑的事情,让用户从这种舒适的交互中感到 Web 应用的"人性化",但是,事件编程也给开发者带来一些困扰,其中,最主要的就是跨浏览器对 DOM 实现的差异性,尤其是 IE, 尽管 IE11 的问世,已经将这种差异最小化,但是一些难以用程序逻辑来判断和解释的"怪象"仍然发生在 IE11 上,