如何在 div 顶部创建“墙”并使其内部的所有内容不可点击且不可聚焦？

Question

假设我有一个div A，它是绝对定位的。在这个div A 内部，可能有几个输入控件。我希望通过单击事件无法访问所有这些控件。我还想防止它们被通过tab 访问，即获得焦点。我希望他们像死了一样，但不是视力障碍。

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

Answer 1

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

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

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

  从技术上讲，该元素仍然是可聚焦的，但使用顺序焦点导航无法到达该元素。

• 让他们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>

Answer 2

有几种方法可以做到这一点。一种是将所有元素的tabindex设置为-1。另一个是不要担心 tabindex，如果你不在模式中，只需阻止 tab。

这是基本思想，不是允许标签的完整解决方案。这使您可以查看如何检测您是否处于模态以允许选项卡并在您不在模态时取消它。

您需要在代码中添加更多逻辑，以查看您是在模式的最后一个文本框中，还是在第一个带有 shift 选项卡的文本框中。

(function () {
    var allow = false,
        isModalActive = true;
    document.getElementById("overlay").addEventListener("keydown",  function(evt){
        var keyCode = evt.keyCode || evt.which;
        if (keyCode === 9) {
           allow=true;  
        }
        //TODO FOR YOU determine if the current element is on the last textbox and than you would need to loop to the first element in the textbox.   Also need to detect if it is shift tab for the first element...
      
    });
    document.body.addEventListener("keydown", function(evt){
        var keyCode = evt.keyCode || evt.which;
        if (isModalActive && keyCode === 9 && !allow) {
            evt.preventDefault();
        }
        allow=false;
    });
}());

#overlay{
  border: 1px solid black;
  background-color: #CCC;
  padding: 2em;
}

<input type="text">
<div id="overlay">
    <input type="text"> 
    <input type="text">
    <input type="text">
</div>
<input type="text">