inert是浏览器原生的交互隔离机制，通过或element.inert=true启用，可同时禁用鼠标、键盘和辅助技术访问，chrome111+、firefox121+、safari18.0+支持，旧版需手动兜底。
inert 属性不是“加个 class 就能禁用”的开关，它是一套浏览器原生的交互隔离机制——只在 Chrome 111+、Firefox 121+、Safari 18.0+ 中生效，旧版浏览器完全无视，且无法靠 JS 模拟补全。
直接写 HTML 时怎么用 inert
最简方式就是把 inert 当作布尔属性写在任意元素上：
<main inert><p>这段文字不可点击、不可选中、不可聚焦，屏幕阅读器也读不到</p></main>注意：它没有值，不写
inert="" 或 inert="true"；写了就生效，删了就恢复。DOM 解析后立即切断该元素及其所有子节点的交互链路和可访问性树挂载。
JS 动态控制 inert 必须用 .inert = true/false
不能用 setAttribute('inert', '')，也不能用 removeAttribute('inert') —— 这些操作对 inert 属性完全无效。浏览器只响应 element.inert 这个 DOM 属性的赋值：
-
el.inert = true：立刻退出焦点（如果当前聚焦其中）、阻止所有事件冒泡进子树、移出可访问性树 -
el.inert = false：恢复全部交互能力，包括重新参与 tab 顺序 - React/Vue 等框架中若服务端渲染（SSR）或 hydration 时没同步
inert状态，会触发“prop mismatch”警告，需确保初始 DOM 和 JS 状态一致
为什么不用 pointer-events: none + aria-hidden 组合
这种组合看似能覆盖鼠标、视觉、读屏，但实际漏掉关键路径：
-
pointer-events: none不影响键盘导航：Tab 仍能聚焦到input或button，焦点卡住后无法自然离开 -
aria-hidden="true"只隐藏给读屏器，不影响键盘操作，也不阻止鼠标事件冒泡 - 两者叠加后，用户可能用键盘触发表单提交、意外激活隐藏按钮、或被辅助技术报出“可聚焦但不可用”的矛盾状态
-
inert是唯一同时切断鼠标、键盘、AT（辅助技术）三端信号的原生方案
兼容性兜底必须手动做，没有 magic polyfill
在不支持 inert 的浏览器里（比如 Safari 17 或旧 Edge），只能退回到“半禁用”策略，且需逐层处理：
- 遍历所有可聚焦元素（
button、a[href]、input、[tabindex]等），统一设tabindex="-1"并移除focus监听 - 对容器加
pointer-events: none防鼠标，再配aria-disabled="true"提供语义提示 - 注意：浮动层（如 toast、loading）必须放在
inert容器外层 DOM，否则一并被锁死
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
