龙空技术网

详解css3属性 pointer-events

从小励志当全栈 621

前言:

此刻兄弟们对“pointercss”大概比较注重,兄弟们都需要剖析一些“pointercss”的相关文章。那么小编在网络上网罗了一些对于“pointercss””的相关内容,希望姐妹们能喜欢,朋友们快快来学习一下吧!

在日常开发中,我们可能遇到这样的需求:一

些元素可以穿透,我们点击触摸它不会触发事件,甚至可以穿透点击它下面的元素。

比如模态框样式,防止按钮反复点击,蒙版可穿透等。

eg:

在这个tab选项卡中,即使最后一个元素被半透明蒙版遮住了,我们一般仍然允许它是可以被点击到的(因为此处是可拖动选项卡,无法写死点击蒙版来选择最后一个tab元素)。

这时候我们就会有一个需求,我们要求这个蒙版是可以穿透的,我们要通过穿透它来点击它下面的元素。

其实这是挺麻烦的。因为如果隐藏删除元素,那么它的蒙版效果也会跟着不见。

但是CS3中新出的一个属性完美的解决了一个问题。

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标(移动端事件也可以)事件的 target。

除了指示该元素不是鼠标事件的目标之外,值 none 表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

对于我们来说,我们只需要记住两个即可!

auto: 默认值,不允许穿透。

none: 可以穿透。

eg:

在这里,当 id 为 box 的元素覆盖住 id 为 pox 的元素时,我们只需要给 box加一行 pointer-events: none; ,点击 box 就可以穿透它直接触发 pox 身上的事件。

ps: 当DOM元素指定有id属性时,不需要通过document.getElementById()来获取定义它,它的id对应的值即为该dom元素对应的变量。

模态框应用

这个属性是我在看colorUI的模态框源码时候看到的,它主要是在模态框隐藏的时候给pointer-events的值改为none,使模态框不会因此而影响到页面中的其它元素。当模态框显示的时候再将pointer-events改为auto。

兼容:

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+, IE11都支持这个CSS3属性。

标签: #pointercss