直接给目标容器设inert=true即可原生冻结其交互与焦点能力；html中须写为，js必须用.inert=true/false赋值，浮层需为兄弟节点而非子元素，旧浏览器需polyfill或三步降级。
HTML 中正确声明 inert
只需在任意容器元素上添加布尔属性 inert（不带值）：<div id="page-content" inert><p>这段内容不可点、不可选、不可聚焦</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2870" title="Gradle 9.8.0"><img
src="https://img.php.cn/upload/manual/001/431/639/6ad9ce71d8cb6379.png" alt="Gradle 9.8.0" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2870" title="Gradle 9.8.0" class="overflowclass">Gradle 9.8.0</a>
<p class="overflowclass"></p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2870" title="Gradle 9.8.0" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></div>
写上即生效，移除即恢复。不要写成 inert="" 或 inert="true"，这些写法语义错误，浏览器会忽略。
JS 动态控制必须用 .inert 赋值
JavaScript 操作 inert 属性有且只有一种可靠方式：
✅ 正确：document.getElementById('page-content').inert = true
✅ 正确：el.inert = false
❌ 无效：el.setAttribute('inert', '')、el.toggleAttribute('inert')、el.inert = 'true' —— 浏览器完全不响应，DOM 属性存在但行为无变化。
禁用时的关键 DOM 结构要求
冻结整块区域不是“加个属性就完事”，结构错一步，浮层就失效：
• 模态框、toast、加载蒙层等浮动元素，必须是被 inert 元素的兄弟节点，不能嵌套在其内部；
• 推荐结构：
<div id="app"> <br> <main id="main-content" inert></main><br> <dialog open></dialog><br> <div class="toast"></div> <br> </div>
• 绝对不要给
兼容性与降级处理
Chrome 111+、Firefox 121+、Safari 18.0+ 原生支持；旧版需兜底：
• 检测支持：if ('inert' in HTMLElement.prototype)
• 不支持时，至少三步模拟：
– el.setAttribute('aria-hidden', 'true')
– el.tabIndex = -1
– 递归遍历所有可聚焦子元素（button、a[href]、input、[tabindex]），设 tabIndex = -1 并监听 focusin 强制重定向焦点
• 更推荐引入官方 polyfill：<script src="https://unpkg.com/wicg-inert@3.1.2/dist/inert.min.js"></script>，放在 前，且需手动调用 inert.apply(el) 处理动态插入的新 inert 元素。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
