inert是浏览器原生的交互隔离机制，通过或element.inert=true启用，可同时禁用鼠标、键盘和辅助技术访问，Chrome111+、Firefox121+、Safari18.0+支持，旧版需手动兜底。
属性不是“加个 class 就能禁用”的开关，它是一套浏览器原生的交互隔离机制——只在 Chrome 111+、Firefox 121+、Safari 18.0+ 中生效，旧版浏览器完全无视，且无法靠 JS 模拟补全。
直接写 HTML 时怎么用
最简方式就是把
当作布尔属性写在任意元素上：
注意：它没有值，不写
或
；写了就生效，删了就恢复。DOM 解析后立即切断该元素及其所有子节点的交互链路和可访问性树挂载。
JS 动态控制
必须用
不能用
，也不能用
—— 这些操作对
属性完全无效。浏览器只响应
这个 DOM 属性的赋值：
：立刻退出焦点（如果当前聚焦其中）、阻止所有事件冒泡进子树、移出可访问性树
：恢复全部交互能力，包括重新参与 tab 顺序
React/Vue 等框架中若服务端渲染（SSR）或 hydration 时没同步
状态，会触发“prop mismatch”警告，需确保初始 DOM 和 JS 状态一致
为什么不用
+
组合
这种组合看似能覆盖鼠标、视觉、读屏，但实际漏掉关键路径：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
不影响键盘导航：Tab 仍能聚焦到
或
，焦点卡住后无法自然离开
只隐藏给读屏器，不影响键盘操作，也不阻止鼠标事件冒泡
两者叠加后，用户可能用键盘触发表单提交、意外激活隐藏按钮、或被辅助技术报出“可聚焦但不可用”的矛盾状态
是唯一同时切断鼠标、键盘、AT（辅助技术）三端信号的原生方案
兼容性兜底必须手动做，没有 magic polyfill
在不支持
的浏览器里（比如 Safari 17 或旧 Edge），只能退回到“半禁用”策略，且需逐层处理：
立即学习
“
前端免费学习笔记（深入）
”；
遍历所有可聚焦元素（
、
、
、
等），统一设
并移除
监听
对容器加
防鼠标，再配
提供语义提示
注意：浮动层（如 toast、loading）必须放在
容器外层 DOM，否则一并被锁死
真正容易被忽略的是：inert 不是样式控制，也不是事件拦截开关，它是 DOM 层级的“存在性开关”——一旦启用，那个子树在浏览器眼里就相当于不存在于交互和可访问性上下文中。别指望 CSS 能 override 它，也别试图用事件委托绕过它。
inertinertinert这段文字不可点击、不可选中、不可聚焦，屏幕阅读器也读不到
inert=""inert="true"inert.inert = true/falsesetAttribute('inert', '')removeAttribute('inert')inertelement.inertel.inert = trueel.inert = falseinertpointer-events: nonearia-hiddenpointer-events: noneinputbuttonaria-hidden="true"inertinertbuttona[href]input[tabindex]tabindex="-1"focuspointer-events: nonearia-disabled="true"inert