inert属性介绍

inert是 htmlElement 的一个布尔属性，意为"惰性"，简单来说，可以禁用一切交互，包括鼠标点击、选中、拖拽、键盘操作等等。

简单理解，一个dom元素被加了 inert 属性后，就丧失了活力，变得不可交互，就好像整个 DOM 都被冻结了一样，所以理解成“冻结”。如果一个元素被inert了，那它的内容就不能被 Ctrl+F 搜索到，window.find(text)也需要跳过

另外，inert是一个布尔类型的属性，就是和平时见到的disabled、hidden等一致，只要有这个属性，就表示为true，不存在才是false。

约等于

[inert] {
  pointer-events: none;
  cursor: default;
}

[inert], [inert] * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

语法

isInert = HTMLElement.inert;
HTMLElement.inert = true | false;

一个布尔值，如果元素是惰性的，则为 true ；否则，该值为 false 。

例子

html：

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

css：

[inert] > * {
  opacity: .5;
}

使用场景

那有什么场景可以用到呢？举一个例子：

假设在一个左右切换卡片的场景，左右的卡片还没有被滑动到中间，但是又露出了一点内容，刚好这露出的部分有一个按钮，通常情况下，在没有滑动到中间的时候，这部分内容应该是不允许产生点击交互的。那就可以通过给非active的卡片添加 inert 。

当然对于上面提到的有视力障碍的人，他不是依靠视觉来感知网页内容，而是借助了一些其他的辅助技术，这就有可能会和我们隐藏掉的内容进行一些意外的交互。

inert属性兼容性

inert 在 Chrome 102 中提供支持，并且在 Firefox 和 Safari 中也都是可用的。

这类比较偏体验的属性其实是不太需要关注兼容的，大部分地方其实都用不上，如果你悄悄在某个地方用了也无妨，浏览器能支持更好，不支持也不影响主要功能。下面是兼容性情况：

总结

总之即使非常新，也可以提前使用起来了，下面总结一下主要知识点：

1. inert是一个 HTMLElement 属性，可以禁用一切用户交互，非常彻底，就像“冻结”了一样
2. inert是一个布尔属性，只要存在该属性就是true，否则为false
3. inert可以很方便的禁用a链接，也包括其他任意元素
4. inert可以很方便的控制焦点的作用范围，让弹窗内的焦点不会跳到外部
5. 原生dialog.showModal已经天然具备局部焦点的特性，大家可以多多使用

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/12200