前言:
此刻兄弟们对“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