在浏览器中，用户交互包括永远排在第一位，不可被打断，哪怕浏览器在假死的状态下，用户的交互行为也是不可被打断的;
但是在inert属性的作用下，用户的交互行为就会被忽略，接下来就带你一起来看看inert属性的使用方法吧。
先来看demo，如果下面的第二行元素可以正常触发交互，例如选中，那证明你的浏览器不支持该属性：
代码片段
1. inert 属性
inert是一个HTML Element的属性，它的属性值是一个布尔值，如果inert的值为true，那么浏览器就会忽略用户的交互行为，如果inert的值为false，那么浏览器就会响应用户的交互行为。
<div inert>
<button onclick="console.log('click')">Click me</button>
</div>
它可以作用在任何的HTML Element上，比如div、span、button、input等等；在有inert属性的HTML Element上它所有的子元素也会被忽略，不会响应用户的交互行为。
虽然它可以让DOM失去交互行为，但是它本身没有样式，也不会影响渲染。
2. inert 的应用场景
2.1. 弹出框
在弹出框中，我们通常会有一个遮罩层，这个遮罩层的作用是阻止用户的交互行为，让用户只能操作弹出框中的内容。
<div id="content" style="height: 200vh;" inert>
这里面有很多内容
<input>
<button onclick="console.log('click')">Click me</button>
......
</div>
<div id="mask" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);"></div>
<div id="dialog" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; background: #fff;">
<button onclick="console.log('click')">Click me</button>
</div>
这个时候，我们可以使用inert属性来代替遮罩层，让用户只能操作弹出框中的内容。
<style>
#content[inert] {
background: rgba(0, 0, 0, 0.5);
}
</style>
<div id="content" style="height: 200vh;" inert>
这里面有很多内容
<input>
<button onclick="console.log('click')">Click me</button>
......
</div>
<div id="dialog" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; background: #fff;">
<button onclick="console.log('click')">Click me</button>
</div>
2.2. 表单禁用
有时候我们需要禁用整个表单，这个时候我们可以使用inert属性来代替disabled属性。
<form>
<input disabled>
<button disabled>Submit</button>
</form>
在没有这个属性之前，我们只能一个一个的禁用表单中的元素，但是现在我们可以使用inert属性来禁用整个表单。
<form inert>
<input>
<button>Submit</button>
</form>
2.3. 阻止用户选中
有时候我们需要阻止用户选中页面中的内容，这个时候我们可以使用inert属性来代替user-select: none。
<div style="user-select: none;">
这里面的内容不能被选中
</div>
在没有这个属性之前，我们只能使用user-select: none来阻止用户选中页面中的内容，但是现在我们可以使用inert属性来阻止用户选中页面中的内容。
<div inert>
这里面的内容不能被选中
</div>
3. 兼容性
可以看到兼容性还不是很好，都是高版本的浏览器才支持，所以这个属性还是为未来作技术预研的，不要在生产环境中使用。
