CSS3 pointer-events 属性小结

[zhaofeihao]

是啥

业务中遇到一个需求就是点击提交按钮的时候，为了防止用户一直点击按钮，发送请求，当请求未返回结果之前对按钮进行禁用。因为按钮是用 <a> 标签写的，所以单纯的 disabled 不可取。

就这样遇到了 pointer-events 这个 CSS3 属性。其作用是指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

咋用

• auto —— 效果和没有定义 pointer-events 属性相同，鼠标不会穿透当前层。在 SVG 中，该值和 visiblePainted 的效果相同。
• none —— 元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了 pointer-events 为其它值，比如auto，鼠标还是会监听这个子元素的。
• 其它属性值为SVG专用，这里不多提。

兼容性

很遗憾，公司对浏览器兼容的最低标准是 IE10。白高兴一场，下方参考处有一个优雅的 polyfill 方案供参考。

参考

MDN - pointer-events

前端观察 - CSS3 pointer-events介绍

张鑫旭 - CSS3 pointer-events:none应用举例及扩展

Github - pointer_events_polyfill.js