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

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

在元素上使用CSS pointer-events属性可禁用用户与其及其后代的交互.

div.disabled { pointer-events: none; }

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

div.disabled { user-select: none; }

请注意,用户选择属性可能需要供应商前缀.

但是,这些CSS属性不会禁用键盘交互,这种交互可能通过标记到后代来实现.

根据这个参考 – https://html.spec.whatwg.org/multipage/interaction.html#inert-subtrees;有一个惰性属性的提议,但它尚未由浏览器实现.

因此,截至目前,您将使用Javascript来禁用键盘交互.只需使用capture连接keydown事件,并将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(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>

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

猜你在找的HTML相关文章