• 实现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 = 完美禁用

  • 相关阅读:
    报表打印
    MyGridControl
    用户控件制作时设计模式加载报错的解决办法
    代码生成工具
    上传控件的使用
    数据加密
    DevExpress介绍
    记一次手动安装pecl扩展memcache
    关于httpd.conf的一点随笔
    temp
  • 原文地址:https://www.cnblogs.com/kunmomo/p/11751656.html
Copyright © 2020-2023  润新知