html怎么用inert属性禁用_HTML如何通过Inert暂停交互区域

inert 属性是浏览器原生的语义化暂停机制，使元素及其子树完全脱离交互与可访问性树；需现代浏览器支持（Chrome 111+、Firefox 121+、Safari 18.0+），JS 设置须用 element.inert = true，不可用 setAttribute。inert 属性能真正让元素及其子树"消失"在交互和可访问性树中------不是靠 disabled（只对表单控件有效），也不是靠 pointer-events: none（仍能被键盘聚焦、屏幕阅读器读取），而是浏览器原生的、语义化的暂停机制。inert 属性生效的前提条件它只在现代浏览器中可用（Chrome 111+、Firefox 121+、Safari 18.0+），旧版 Safari 和 Edge 旧内核完全不支持，且没有 polyfill 能完美模拟其行为。使用前必须确认目标环境：inert 是 HTML 全局属性，可直接写在任意元素上：<div inert>...</div>JavaScript 中设置需用 element.inert = true（注意：不是 setAttribute('inert', '')，后者无效）动态添加/移除时，DOM 会立即响应：焦点自动退出 inert 区域，tabindex 失效，click/keydown 事件不再冒泡进该子树inert 和 aria-hidden + pointer-events 的关键区别很多人试图用组合方式"模拟" inert，但会踩坑：aria-hidden="true" 只影响屏幕阅读器，不影响键盘导航或鼠标点击pointer-events: none 阻止鼠标，但 Tab 仍能聚焦其中的 input 或 button，且焦点卡住后无法自然离开display: none 或 visibility: hidden 会破坏布局流或留白，而 inert 不影响渲染样式，仅切断交互与可访问性链路真正需要"临时挂起一整块 UI（比如弹窗背后的页面）"时，inert 是唯一能同时解决键盘、鼠标、AT（辅助技术）三端一致性的方案。立即学习"前端免费学习笔记（深入）"；常见误用场景与修复建议最常出问题的是"条件切换"逻辑写错： 幻导航网 发现优质实用网站,开启网络探索之旅！