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

概述在 HTML中,我可以通过CSS禁用与整个DOM子树的用户交互吗？ 在元素上使用CSS pointer-events属性可禁用用户与其及其后代的交互. div.disabled { pointer-events: none; } 您还可以使用user-select属性进一步限制文本选择的用户交互. div.disabled { user-select: none; } 请注意,用户选择属性可能需要 在 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 >    <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中我可以禁用与整个DOM子树的用户交互吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。