页面加载初期直接在主容器写即可立即禁用交互，但必须在关键js就绪后立刻执行maincontent.inert = false移除，不可依赖domcontentloaded；旧浏览器需兜底设tabindex=-1、aria-hidden="true"及pointer-events:none。
页面加载初期就加 inert 是最直接的防误点方式，但必须配合“内容就绪后立即移除”逻辑，否则用户会卡在不可交互状态。
怎么在 HTML 首屏就启用 inert 防点击
直接在主容器上写死 inert 属性即可，浏览器解析到就立刻生效：
<main id="main-content" inert><button onclick="submitForm()">提交</button> <input type="text" name="email"></main>
注意：inert 是布尔属性，不带值、不加引号、不写 inert="" 或 inert="true" —— 后者完全无效。
- 它对所有子元素（
button、a、input、details、甚至contenteditable）一并生效 - 焦点自动退出该区域，Tab 键跳过整个子树，屏幕阅读器完全忽略
- 不影响布局、滚动、CSS 渲染，按钮仍显示为可点击态 —— 你得自己加
opacity: 0.5或pointer-events: none视觉反馈
JS 何时移除 inert 才安全
不能等 DOMContentLoaded 或 window.onload 再移除 —— 这期间用户可能已多次点击，尤其在慢网或高交互密度页面。
- 推荐在关键 JS 加载完成、表单校验逻辑就绪、且 DOM 已挂载后立刻执行：
mainContent.inert = false - 避免用
el.setAttribute('inert', '')或el.removeAttribute('inert')—— 这些调用无效，浏览器只响应.inert = true/false - 若用 React/Vue，SSR 输出的 HTML 必须初始含
inert，否则 hydration 时触发 “prop mismatch” 警告
移动端虚拟键盘弹出时容易失效
Android/iOS 虚拟键盘展开会触发 focusin 和滚动重排，inert 区域若含可滚动容器（如 main 自身），可能导致焦点丢失或 Tab 顺序错乱。
- 监听
virtualkeyboard事件（Chrome 109+、Safari 16.4+），键盘弹出时确保焦点落在安全元素上：document.getElementById('safe-focus').focus() - 不要依赖
inert单独撑住整个交互流 —— 它不拦截click事件冒泡，只让子树“不可达”，若父级有监听器仍可能触发 - 旧浏览器（Safari 17、部分安卓 WebView）根本不识别
inert，必须兜底：递归设tabIndex = -1+aria-hidden="true"+pointer-events: none
真正难处理的是“移除时机”和“兜底边界”——inert 不是开关，而是 DOM 子树的“存在性标记”，一旦设错或没及时恢复，用户就卡在不可操作状态，且无任何视觉提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
