直接在目标容器上添加布尔属性inert即可生效，如内容不可交互；JS需用.inert = true/false控制，浮层须置于inert区域外，旧浏览器需引入wicg-inert polyfill。

直接给目标区域加 inert 属性就能彻底暂停它的所有交互和焦点能力——它不是视觉隐藏，也不是事件拦截，而是让浏览器原生“忽略”该元素及其全部子树的用户输入与可访问性挂载。

怎么写 HTML 才生效

把 inert 当作布尔属性写在任意容器上，不带值：

• 这段内容不可点、不可选、不可聚焦，屏幕阅读器也读不到

• 写了就启用，删了就恢复；不要写 inert="" 或 inert="true"，那样无效
• 它不影响布局、颜色、尺寸等任何样式，页面外观完全不变

JS 动态控制必须用 .inert = true/false

不能靠 setAttribute 或 removeAttribute 操作：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 正确：document.getElementById('main').inert = true
• 错误：el.setAttribute('inert', '') —— 浏览器完全无视
• 设为 true 后，当前聚焦其中的元素会自动失焦，Tab 键跳过整个子树，click/keydown 不再冒泡进来

禁用整块区域时的关键细节

真正容易出错的是 DOM 结构和浮层位置：

• 模态框开启时，应只给主内容区（如
  或
  ）加 inert，而不是给
• 弹窗、加载蒙层、toast 等浮动层必须放在 inert 容器的外层 DOM 中，否则一并被锁死
• 服务端渲染或框架 hydration 后，需确保 JS 状态与初始 HTML 的 inert 属性一致，否则 React/Vue 会报 “prop mismatch”

旧浏览器必须手动兜底

Chrome 111+、Firefox 121+、Safari 18.0+ 原生支持；更早版本需 fallback：

• 推荐使用官方 wicg-inert polyfill（支持 IE9+、Safari 10+），但注意它不模拟辅助技术语义
• 加载 polyfill 必须在业务脚本之后、首次使用 inert 之前，且不能加 async 或 defer
• 动态插入的 [inert] 元素，polyfill 不自动处理，需手动调用 inert.apply(element)