CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)

CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)

其它属性都只适用于SVGvisiblePainted | visibleFill|visibleStroke|visible paintedfill|stroke |all

3、实际代码使用中案例:

禁止点击

图层覆盖覆盖后,底层图层鼠标事件失效时(无法点击),可以通过这个属性来实现,使得点击穿透,来触发底层的鼠标事件。

4、案例

4.1、禁止点击案例

第二个a标签不仅无法被点击,而且没有鼠标手形样式

4.2、点击穿透案例

顶层

分析如下原本底层被顶层覆盖,使得底层的百度跳转事件无法被触发。

但是这里顶层设置了pointer-events: none;,使得顶层的鼠标事件被禁止,浏览器转而去监听下一层的鼠标事件,这就使得百度跳转事件又可以生效了。

由于顶层内的子元素b继承了顶层的pointer-events: none;,使得b也无法触发鼠标事件,但是,b元素其自身又重新设置了pointer-events:auto;,使得b又可以触发鼠标事件了。

在b元素的点击事件上,如果不加evt.stopPropagation(),去阻止事件冒泡,通过点击b,也会触发父容器的点击事件

5、兼容性

IE 11+

Firefox 3.6+

Chrome 4.0+

Safari 6.0

Opera 15.0

iOS Safari 6.0

Android Browser 2.1+

Android Chrome 18.0+

相关推荐