当前位置：首页 > 科技观察

快速浏览一下Inert属性，你明白了吗？

时间：2023-03-20 12:48:37 科技观察

引入了一个与用户行为密切相关的新属性：惰性。HTMLElement.inert-WebAPI|MDN（mozilla.org）[1]。有了这个属性，很多交互行为就可以更容易控制了，花几分钟看懂！1、什么是惰性？inert是HTMLElement的布尔属性，意思是“惰性”。简单的说就是可以禁用所有的交互，包括鼠标点击、选择、拖动、键盘操作等。例如：

`inert`是HTMLElement的一个布尔属性，简单来说就是“惰性”的意思,可以禁用所有交互

link

下面是实际效果:可以看到添加inert属性后，整个元素不能进行任何交互，就好像整个DOM都被冻结了一样，所以理解为“冻结”，也许会好一些。您还可以查看在线演示：htmlinert(codepen.io)[2]或htmlinert(runjs.work)[3]。另外inert是一个布尔属性，和大家平时看到的disabled、hidden等是一致的。只要这个属性存在，就表示为真，如果不存在，就表示为假。...

...

...

...

...

这里需要注意：2.实际应用惰性是一个新的属性，它总会和一些实际的应用场景相关联。下面介绍两种情况：1.链接的禁用以前禁用链接可能是这样的：a{pointer-events:none;}但是，这只是防止了鼠标点击行为，键盘仍然可以专注。为了防止对于键盘事件，还需要加上tabindex=-1。这样键盘就不会聚焦在a链接上。另外还有一个比较暴力的解决方法，就是直接去掉a的href属性。去掉a.href=''后，a只是一个普通的标签，不会被聚焦。但是这个方案需要保留asomewhere原有的href属性，以便后续恢复。如果使用惰性属性，则可以直接在各个方向禁用它。也可以通过[inert]属性自定义样式。a[inert]{opacity:.5}以更好地在视觉上区分哪些部分被禁用。当然，不仅仅是一个链接，任何其他元素都可以通过这种方式被禁用。2.弹窗中的焦点许多弹窗内部也有交互，比较常见的是确认和取消按钮。如果需要兼顾键盘访问，肯定希望弹窗打开后，焦点只能在弹窗内部切换，不能移到外面。比如像这样，焦点还是可以往外跑。现在有了inert就可以轻松解决这个问题了，只需要在外层元素上加上inert即可。打开弹窗链接效果如下：其实如果你用原来的弹窗，通过showModal打开后，已经很自然地支持局部焦点功能了。dialog.showModal()可以省去很多焦点控制，为什么不用原生的呢？3.兼容性和总结这种比较注重体验的属性其实不需要关注兼容性。其实大部分地方都不需要。不支持或影响主要功能。以下为兼容状态：全部兼容！除了版本要求有点高。没关系，有可用的polyfill，如下：WICG/inert：用于惰性属性和属性的Polyfill。(github.com)[4]看了大致原理，和前面的处理基本一样，pinter-events和tabindex=-1的组合，用来屏蔽鼠标键盘行为。总之，即使很新，也可以提前使用。这里总结一下主要知识点：inert是一个HTMLElement属性，可以禁用所有用户交互，非常彻底，就像“冻结”一样。inert是一个布尔属性，只要该属性存在就为真，否则为假。惰性可以轻松禁用链接，包括任何其他元素。inert可以轻松控制焦点的范围，让弹窗中的焦点不会跳到外面。原生的dialog.showModal已经具备了局部焦点的特性，大家可以多多使用。参考文献[1]HTMLElement.inert-WebAPIs|MDN(mozilla.org):https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert[2]htmlinert(codepen.io):https://codepen.io/xboxyan/pen/oNdQBNp[3]htmlinert(runjs.work)：https://runjs.work/projects/39d0efb5b0a442ed[4]WICG/inert：用于惰性属性和属性的Polyfill。(github.com):https://github.com/WICG/inert

上一篇：在您的工厂实施工业物联网技术的5个理由_0

下一篇：OpenHarmony源码分析安全子系统（应用权限管理）

快速浏览一下Inert属性，你明白了吗？相关文章

最新推荐

猜你喜欢