欢送关注我的公众号：前端侦探
介绍一个全新的、和用户行为非亲非故的属性：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的联合，阻止鼠标和键盘行为
总之即便十分新，也能够提前应用起来了，上面总结一下次要知识点：
inert是一个 HTMLElement 属性，能够禁用所有用户交互，十分彻底，就像“解冻”了一样inert是一个布尔属性，只有存在该属性就是true，否则为falseinert能够很不便的禁用a链接，也包含其余任意元素inert能够很不便的管制焦点的作用范畴，让弹窗内的焦点不会跳到内部- 原生
dialog.showModal曾经人造具备部分焦点的个性，大家能够多多应用
多多关注原生，一些不起眼的属性可能让你的代码更加精简，更加优雅。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤
欢送关注我的公众号：前端侦探