html - 在 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 属性不会禁用键盘交互，键盘交互可能通过跳转到后代的方式发生。

根据此引用资料 -- 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; }

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

演示 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>