wicg-inert 是一款能够帮助我们实现局部停用页面交互的 npm 包。在前端开发中，我们经常需要实现一些不同级别的“禁止点击”交互，通常的做法是借助一些页面遮罩或者 CSS 样式实现，但实现方式非常麻烦且不够灵活，而 wicg-inert 能够完美地解决这个问题。
安装和使用
使用 npm 安装 wicg-inert：
npm install wicg-inert
然后在项目中使用：
import { InertRoot, setInert } from 'wicg-inert';
// 首先添加 InertRoot 元素，并将其作为所有需要禁用交互的元素的根元素
const inertRoot = new InertRoot(document.getElementById('inert-root'));
// 设置想要禁用交互的元素
setInert(document.getElementById('target'), inertRoot);API
InertRoot
InertRoot 构造函数用来创建一个 InertRoot 对象。InertRoot 对象是一个包含若干设置禁用交互的元素的对象，所有需要使用 wicg-inert 禁止交互的元素都必须包含在这个对象内。
InertRoot 构造函数接受一个 DOM 元素作为参数，用来表示 InertRoot 对象的根元素。
const inertRoot = new InertRoot(document.getElementById('inert-root'));setInert
setInert 函数接受两个参数：
- 一个 DOM 元素，表示需要禁止交互的元素
- 一个
InertRoot对象，这个元素是InertRoot对象的子元素
setInert(document.getElementById('target'), inertRoot);使用 setInert 函数可以在指定的 InertRoot 对象中将一个 DOM 元素禁止交互。需要注意的是，这个元素的父元素必须是先前创建的 InertRoot 对象的子元素。
unsetInert
unsetInert 函数接受一个参数，即需要恢复交互的元素的 DOM 元素。这个函数可以用来撤销之前禁止的交互。
unsetInert(document.getElementById('target'));inertRoot
inertRoot 是一个表示当前页面中包含的所有 InertRoot 对象的集合。这个集合可以用来在页面的其他位置重新使用之前已经创建的 InertRoot 对象，不需要再次创建新的对象。
// 获取第一个 InertRoot 对象 const root = inertRoot[0];
深入理解
在 wicg-inert 的实现中，它通过控制被禁用元素之外的节点的 focus 事件来达到禁用元素的目的。具体来说，当某个元素被设置了禁用之后，在这个元素外的其他元素在进行 focus 事件时都会被拦截并阻止。
然而，由于不同的浏览器对 focus 事件的实现可能存在差异，因此在一些特定情况下可能会出现兼容性问题。可以通过使用 document.activeElement 来获取当前页面中是否存在已经被禁用的元素。如果当前页面中存在已经被禁用的元素，document.activeElement 返回的就是这个元素，此时可以再次设置某个新的被禁用的元素，然后撤销之前的禁用。
结语
wicg-inert 是一款非常实用的 npm 包，可以帮助前端开发者快速实现局部停用页面交互的功能。希望本文对您有所帮助，谢谢您的阅读。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------- ----------------
------ ----------------
----------- -
--------- ---------
-------- --
-
----- -
--------- ------
---- --
----- --
------ -----
------- -----
----------- ------- -- -- -----
-------- -----
------------ -------
---------------- -------
-------- --
-
--------
-------
------
---- ----------------
------- --------------- ----------
------- --------------- ----------
------- --------------- ----------
------
----------------
---- ----------
-------------------
------
------- ---------------------- -------------------------------------------------------
------- -----------------------
-- -- --------- --
----- --------- - --- -------------------------------------------------
-- ---- - ----- - --- -
------------------------------------------------------------ -------- -- -
-------------------------------------------- -----------
-------------------------------------------- -----------
---
-- ---- - ------ - --- - ---
------------------------------------------------------------ -------- -- -
-----------------------------------------------
-----------------------------------------------
---
-- -- -------- -- ----- ------------
---------------------------------- -------- -- -
-- --------------------------------------------------- -
----------------------------------------- -----------
- ---- -
--------------------------------------------
-
-- ------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb137b5cbfe1ea06110fd