在HTML中，我能否禁用用户与整个DOM子树的交互？

Question

在HTML中，我能否禁用用户与整个DOM子树的交互？

html

50

在HTML中，我能否通过CSS禁用整个DOM子树的用户交互？

- Ben Aston

2个回答

1

如果您需要禁用整个页面的所有交互类型，您可以简单地在所有元素上方放置一个透明的

。

#mask {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10; /* some high z-index */
  width: 100vw;
  height: 100vh;
  opacity: 0;
  user-select: none; /* prevents double clicking from highlighting entire page */
}

<!DOCTYPE html>
<html>

<body>
  <input type="text">
  <button>button</button>
  <a href="https://google.com">link</a>

  <div id="mask"></div>
</body>

</html>

- luek baja

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Abhitalks · Accepted Answer

使用CSS pointer-events 属性在元素上禁用用户与其自身和子孙元素的交互。

div.disabled { pointer-events: none; }

您还可以使用user-select属性来进一步限制文本选择的用户交互。

div.disabled { user-select: none; }

请注意，user-select属性可能需要供应商前缀。

但是，这些CSS属性不会禁用通过Tab键进入后代元素的键盘交互。根据此参考文献，提出了一个 inert属性的建议，但浏览器尚未实现。

因此，目前只能使用JavaScript来禁用键盘交互。将 keydown事件与capture 一起连接，并将 returnValue设置为false。不要忘记允许Tab键以便于退出，否则焦点可能会被困住。

var noInteracts = document.getElementsByClassName('disabled');
[].map.call(noInteracts, function(elem) {
    elem.addEventListener("keydown", function(e) {
        if (e.keyCode != 9) {       // allow tab key to escape out
            e.returnValue = false;
            return false;
        }
    }, true);
});

你也可以使用以下CSS代码在输入框聚焦时隐藏高亮轮廓线：

div.disabled *:focus { outline: 0; }

下面是一个将所有上述技术结合在一起的演示。

演示fiddle: http://jsfiddle.net/abhitalks/hpowhh5c/5/

代码片段:

var noInteracts = document.getElementsByClassName('disabled');
[].map.call(noInteracts, function(elem) {
    elem.addEventListener("keydown", function(e) {
        if (e.keyCode != 9) {
            e.returnValue = false;
            return false;
        }
    }, true);
});

div.disabled { 
    pointer-events: none; 
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; 
  user-select: none;
}
div.disabled *:focus { outline: 0; }

<p>This is normal</p>
<form>
    <label>Input 1: <input id="i1" /> </label>
    <button>Submit</button>
</form>
<hr />
<div class="disabled">
    <p>User interaction is disbled here</p>
    <form>
        <label>Input 2: <input id="i2" /> </label>
        <button>Submit</button>
    </form>
    <p>Lorem ipsum</p>
</div>