实现a标签按钮完全禁用


前言

最近在开发时遇见一个问题

我们知道a标签的disabled属性部分浏览器支持,但是尽管设置了disabled属性也无法阻挡任何鼠标经过或是点击事件的,那么如何实现a标签按钮的禁用呢?

转换一下思维,设置disabled属性的元素表现为不能点击、无法获得光标焦点,那么我们不用disabled属性实际上也可以达到同样的效果!

实现

方法一:移除点击事件click或touchend

我们可以直接使用jquery:unbind()或者JS:removeEventListener()移除点击事件

方法二:给a标签设置css属性pointer-events:none

pointer-events:none是css3中的属性,表示禁用鼠标事件,这样实际上也是将click事件去掉了!

方法三:移除a标签的href属性

我们可以使用jquery:removerAttr()或者JS:removeAttribute()移除a标签的href属性

注意不能将href属性赋值为空,因为空的a标签会跳转到本页

完美禁用

我们在设置了pointer-events:none后发现元素仍然会被focus到,那么如何解决这个问题呢?

给a标签设置disabled属性虽然不能禁用鼠标事件,但是可以禁用键盘事件!!!

无href + pointer-events:none + disabled = 完美禁用

进一步整理 

pointer-events:none & without href = 完美禁用


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM