我很难找到有关DOM元素模糊时发生的“假设”的任何文档。
我的幼稚假设是浏览器将遍历DOM来查找下一个可聚焦元素-但考虑到以下jsfiddle，显然不会发生这种情况。
<!-- HTML ----------------------------- -->
<body>
<div id="root" tabindex="0">root
<div id="p1" tabindex="0">p1
<div id="p2" tabindex="0">p2
</div>
</div>
</div>
</body>
/* Javascript */
var root = document.getElementById("root");
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
root.addEventListener('keydown', function(event) {
console.log("root keydown");
}, false);
p1.addEventListener('keydown', function(event) {
console.log("p1 keydown");
}, false);
p2.addEventListener('keydown', function(event) {
console.log("p2 keydown - blurring p2, hoping that focus will move up the dom to p1");
event.stopPropagation();
p2.blur();
if (document.activeElement !== p1)
console.log("well, that didn't work out so well :( ");
console.log("focused element = ");
console.log(document.activeElement);
}, false);
p2.focus();
console.log("focused element = ");
console.log(document.activeElement);
那么，应该定义什么呢？我发现Chrome发生了什么，就是activeElement跳到body-并跳过了所有可聚焦的项目。目前尚不清楚body是否被重点关注，或者仅是默认的处理程序来activeElement关注其他内容。
给定一个复杂的面向对象的Javascript应用程序，其中p2不了解p1，但是假设DOM中更高的任何内容都将得到关注，我真的想手动针对每个blur()事件遍历DOM并搜索可关注的元素，我自己集中精力？
与此规范最接近的事情可能是对HTML5 CR中焦点的描述（正在进行中，“一个文档草案，随时可能被其他文档更新，替换或淘汰”），但实际上与共识）。它说：“可能没有重点。如果没有元素集中，则文档收到的关键事件必须以body元素（如果有）为目标，否则必须以Document的根元素（如果有）为目标。如果没有根元素，则不能触发关键事件。”
由于该blur()方法仅在移出焦点时（在DOM 2 HTML规范中）被定义，因此意味着将页面保持在没有任何元素被聚焦的状态。但是，这看起来好像是该body元素被集中了：例如，如果您有一个keypress属性，它就会被触发。但是，这与聚焦状态不同。例如，在这种情况下，该body元素与CSS选择器不匹配:focus。
结论是，您通常应该避免使用blur()和focus()处理一些合适的可聚焦元素，如其他答案所示。一个例外是您只想放弃所有键盘事件的情况。然后blur()，如果您的代码未将任何键盘事件处理程序分配给该body元素，则OK 。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句