CSS3 pointer-events 属性小结

时间 2019-12-06

标签 css3 css pointer events 属性小结栏目 CSS 繁體版

原文原文链接

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

就这样遇到了 pointer-events 这个 CSS3 属性。其做用是指定在什么状况下 (若是有) 某个特定的图形元素能够成为鼠标事件的 target。css

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

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