元素禁用的3方式

元素禁用的3方式

• [disabled]
  • 适合表单元素，可以整体禁用（配合
    
    元素）
  • 禁止点击和键盘访问，支持悬停，与:disabled, :enabled味蕾匹配
• pointer-events: none;
  • 适合非表单元素
  • 禁止鼠标行为（点击，悬停）
  • 无法组织键盘行为（tab还是会触发focus）
• [inert]
  • 全局禁用，禁用一切交互行为
  • 需要自己设置样式
  • 兼容性 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert
    • 
  • polyfill https://github.com/WICG/inert
    

参考: https://www.bilibili.com/video/BV14v4y1s78M/?vd_source=5a780d0a07b146ec26fe203babfaa46e

Three ways to disable an element.

• [disabled]
  • Suitable for form elements, can disable them as a whole (in conjunction with the <fieldset> element).
  • Disables click and keyboard access, supports hover, and matches with :disabled and :enabled.
• pointer-events: none;
  • Suitable for non-form elements.
  • Disables mouse behavior (clicking, hovering).
  • Cannot prevent keyboard behavior (tab still triggers focus).
• [inert]
  • Globally disables all interaction behavior.
  • Requires setting styles manually.
  • Compatibility:
    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert
    • 
  • Polyfill:
    https://github.com/WICG/inert
    •