在 HTML 中，我可以禁用与整个 DOM 子树的用户交互吗？

Question

在 HTML 中，我可以通过 CSS 禁用用户与整个 DOM 子树的交互吗？

Answer 1

在元素上使用 CSS pointer-events 属性来禁用用户对其及其后代的交互。

div.disabled { pointer-events: none; }

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

div.disabled { user-select: none; }

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

---

但是，这些 CSS 属性不会禁用键盘交互，而键盘交互可能通过 Tab 键进入后代而发生。

根据这个参考——https://html.spec.whatwg.org/multipage/interaction.html#inert-subtrees;有一个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; }

以下是结合上述所有技术的演示。

演示小提琴：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>