Question

想象一下，我有一个div A，它是绝对定位的。在此div A内，可能有几个输入控件。我希望通过点击事件无法访问所有这些控件。我还想阻止它们通过tab访问，即获得焦点。我希望他们像死人一样，但没有视力残疾。

实现这一目标的最佳方法是什么？

Answer 1

您可以使用pointer-events: none阻止鼠标操作：

要防止内容为focusable，您可以执行以下操作之一：

为每个默认设置为tabindex的元素设置否定tabindex focus flag

从技术上讲，该元素仍然可以聚焦，但使用顺序焦点导航无法实现。
让他们inert

但是，除了模态对话框之外，我不知道有什么办法可以做到这一点，这会使整个文档变得惰性。
Disable每个元素

请注意，并非所有元素都可以禁用
使用JS撤消焦点。

请注意，focus（也不是focusin）事件无法取消，但您可以使用.blur()撤消该事件。

由于focus没有冒泡，如果您想要事件委派，则必须听取捕获阶段
```
element.addEventListener('focus', function(event) {
  event.target.blur();
}, true);
```

示例：

document.querySelector('div').addEventListener('focus', function(e) {
  e.target.blur();
}, true);

div {
  pointer-events: none;
}

<div>
  <button type="button">I am a button</button>
  <input type="button" value="I am an input button" />
  <input type="text" value="I am a text button" />
  <a href="javascript:void(0)">I am an anchor</a>
</div>

我怎样才能创建一个＆＃34;墙＆＃34;在div之上并使其中的所有内容都不可点击且无法集中注意力？

1 个答案: