让disable的元素“动”起来

前言

前端开发时经常会遇到用户需要同意协议才能进行提交的操作,此时,如果原本使用的就是表单的方式,那么在用户未同意时disable提交按钮是最为稳妥的方案。

当然,还是那句老话,前端所有的验证仅仅是为了“用户体验”, 如果涉及其他考量,请务必后端再判断一次!

然而,disable的元素,是不能够触发事件的,也就是说,没有办法在click与submit时友好地进行提示,这与我们的预期不符,因此,这里推荐几种hack方案。

1. CSS大法好

input[disabled] {pointer-events:none}

仅此一行,解决问题,什么原理呢?

pointer-events:none元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

也就是说,我们将其事件“转移”,disable触发不了,让他上级处理,能够达到一样的效果;

让disable的元素“动”起来
本文作者
spark1e
发布于
2021-06-04
许可协议
转载或引用本文时请遵守许可协议,注明出处、不得用于商业用途!
评论区 - Powered by Giscus