CSS3 pointer-events 属性小结

是啥

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

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

咋用

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

兼容性

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

参考

MDN - pointer-events

前端观察 - CSS3 pointer-events介绍

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

Github - pointer_events_polyfill.js

猜你喜欢

转载自blog.csdn.net/weixin_34064653/article/details/91391173