关于前端:快速了解-inert-属性

欢送关注我的公众号：前端侦探

介绍一个全新的、和用户行为非亲非故的属性：inert。

HTMLElement.inert – Web APIs | MDN (mozilla.org)

有了这个属性，能够更加轻易地管制很多交互行为，花几分钟理解一下吧

一、inert 是什么？

inert是 HTMLElement 的一个布尔属性，意为 ” 惰性 ”，简略来说，能够禁用所有交互，包含 鼠标点击 、 选中 、 拖拽 、 键盘操作 等等，举个例子

<div inert>
  <p>`inert` 是 HTMLElement 的一个布尔属性，意为 "惰性"，简略来说，能够禁用所有交互 </p>
  <a href="/link">link</a>
  <button>button1</button>
  <button>button2</button>
</div>

上面是实际效果

能够看到，增加了 inert 属性后，整个元素无奈进行任何交互，就如同整个 DOM 都被解冻了一样，所以了解成“解冻”，可能会更好一些

你也能够查看线上 demo：html inert (codepen.io)或者 html inert (runjs.work)

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

<!-- 以下都为 true-->
<div inert>...</div>
<div inert="true">...</div>
<div inert="false">...</div>
<!-- 以下才是 false-->
<div>...</div>

这个须要留神一下

二、inert 的理论利用

一个新的属性，总会联想到一些理论利用场景，上面介绍两个案例

1. a链接的禁用

在过来，要禁用一个 a 链接 可能会这样

a{pointer-events: none;}

然而，这样只是阻止了鼠标点击行为，键盘还是能够 focus 到的，为了阻止键盘事件，还须要增加tabindex=-1

<a tabindex="-1" href="/xxx"></a>

这样键盘就不会聚焦到 a 链接 上了

除此之外，还有一种更为暴力的计划，间接去除 a 的href属性

a.href = ''

这样去除之后，a就仅仅是一个一般的标签了，也不会被聚焦到了。不过这个计划须要在某处保留 a 原有的 href 属性，以便后续还原。

如果用 inert 属性，间接就能够实现全方位的禁用了

<a inert href="/xxx"></a>

还能够通过 [inert] 属性自定义款式

a[inert]{opacity: .5}

这样在 视觉上 能够更好地区分哪些局部是禁用的

当然，不仅仅是 a 链接，其余任何元素都能够用这种形式来禁用

2. 弹窗中的焦点

很多弹窗外部也会有交互，比拟常见的确认、勾销按钮。

如果须要兼顾到键盘拜访，必定是心愿在弹窗关上后，焦点只能在弹窗外部切换，而不能挪动到内部，比方像这样，焦点依然能够跑到里面去

当初有了inert，就能够很不便的解决这个问题了，只须要在里面的元素上增加inert

<div inert>
  <button id="btn"> 关上弹窗 </button>
  <a href="/link">link</a>
</div>
<dialog>
  ...
</dialog>

成果如下

其实，如果是用原生的弹窗，通过 showModal 关上后，曾经人造反对部分焦点个性了

dialog.showModal()

这样能够省去大量的焦点管制管制，还有什么理由不去应用原生呢？

三、兼容性和总结

这类比拟偏体验的属性其实是不太须要关注兼容的，大部分中央其实都用不上，如果你轻轻在某个中央用了也不妨，浏览器能反对更好，不反对也不影响次要性能。上面是兼容性状况

🙂全兼容！除了版本要求有点高以外。

没关系，还有 polyfill 能够用，如下

WICG/inert: Polyfill for the inert attribute and property. (github.com)

看了一下大抵原理，和以前的解决基本一致，pinter-events和 tabindex=-1 的联合，阻止鼠标和键盘行为

总之即便十分新，也能够提前应用起来了，上面总结一下次要知识点：

1. inert是一个 HTMLElement 属性，能够禁用所有用户交互，十分彻底，就像“解冻”了一样
2. inert是一个布尔属性，只有存在该属性就是true，否则为false
3. inert能够很不便的禁用 a 链接，也包含其余任意元素
4. inert能够很不便的管制焦点的作用范畴，让弹窗内的焦点不会跳到内部
5. 原生 dialog.showModal 曾经人造具备部分焦点的个性，大家能够多多应用

多多关注原生，一些不起眼的属性可能让你的代码更加精简，更加优雅。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

欢送关注我的公众号：前端侦探