We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
业务中遇到一个需求就是点击提交按钮的时候,为了防止用户一直点击按钮,发送请求,当请求未返回结果之前对按钮进行禁用。因为按钮是用 <a> 标签写的,所以单纯的 disabled 不可取。
<a>
disabled
就这样遇到了 pointer-events 这个 CSS3 属性。其作用是指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。
pointer-events
target
很遗憾,公司对浏览器兼容的最低标准是 IE10。白高兴一场,下方参考处有一个优雅的 polyfill 方案供参考。
MDN - pointer-events
前端观察 - CSS3 pointer-events介绍
张鑫旭 - CSS3 pointer-events:none应用举例及扩展
Github - pointer_events_polyfill.js
The text was updated successfully, but these errors were encountered:
No branches or pull requests
是啥
业务中遇到一个需求就是点击提交按钮的时候,为了防止用户一直点击按钮,发送请求,当请求未返回结果之前对按钮进行禁用。因为按钮是用
<a>
标签写的,所以单纯的disabled
不可取。就这样遇到了
pointer-events
这个 CSS3 属性。其作用是指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的target
。咋用
pointer-events
属性相同,鼠标不会穿透当前层。在 SVG 中,该值和 visiblePainted 的效果相同。pointer-events
为其它值,比如auto,鼠标还是会监听这个子元素的。兼容性
很遗憾,公司对浏览器兼容的最低标准是 IE10。白高兴一场,下方参考处有一个优雅的 polyfill 方案供参考。
参考
MDN - pointer-events
前端观察 - CSS3 pointer-events介绍
张鑫旭 - CSS3 pointer-events:none应用举例及扩展
Github - pointer_events_polyfill.js
The text was updated successfully, but these errors were encountered: