Question

我很难找到任何关于什么是“假设”在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 - 并沿途浏览所有可聚焦项目。目前还不清楚身体是否被集中，或者只是activeElement的默认处理程序，如果没有其他重点。

鉴于一个复杂的面向对象的javascript应用程序，其中p2不知道p1，但假设DOM中的任何东西都会获得焦点，我真的想在每个{{1}上手动遍历DOM事件和搜索可聚焦元素并自己关注它们？

Answer 1

最接近规范的可能是HTML5 CR中的description of focus（正在进行中，“草案文档，可能随时被其他文档更新，替换或废弃”，但是在实践中接近共识）。它说：“可能没有重点关注的因素;当没有元素被聚焦时，文档接收的关键事件必须以body元素为目标，如果有的话，或者在Document的根元素上，如果有的话。如果没有根元素，则不得触发键事件。“

由于blur()方法被定义（在DOM 2 HTML规范中）只是为了移除焦点，这意味着将页面保留在没有元素聚焦的状态。但这可能看起来像是body元素：如果你有一个keypress属性，它会被触发。然而，这与聚焦状态不同。例如，在这种情况下，body元素与CSS选择器:focus不匹配。

结论是，您通常应避免在某些合适的可聚焦元素上使用blur()并执行focus()，如其他答案所示。例外情况是您只想丢弃所有键盘事件。如果您的代码未向blur()元素分配任何键盘事件处理程序，则body即可。

Answer 2

如果你只想确保一个元素在另一个元素变得模糊时聚焦：

/* Javascript */
var root = document.getElementById("root");
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");

p2.addEventListener('blur', function(event) {
    p1.focus();
    activeEl();
}, false);

p2.focus();
activeEl();
function activeEl() {
    console.log("focused element = ");
    console.log(document.activeElement);
}

小提琴：http://jsfiddle.net/2cWcA/

您可以对此进行扩展，以便在任何元素模糊时，调用父级的focus方法。

Answer 3

我的理解是blur只是意味着不重视。换句话说，聚焦元素失去焦点，并且未定义什么，如果有的话，获得焦点。 activeElement变为body的事实可能只是副作用。而不是将其设置为null设置为正文，以指示文档通常仍具有焦点。

Answer 4

实际上，document.ActiveElement（）会聚焦一个元素。在javascript中，焦点就像document.getElementById('myAnchor').focus()一样更多当焦点事件在访问者关注元素时触发。

默认情况下，并非所有元素都是可聚焦的。例如，INPUT和所有类型或表单字段都支持此事件，A支持它。作为一个反例，DIV不支持焦点。

支持聚焦的元素类型列表在浏览器之间略有不同。

由于

模糊DOM元素时会发生什么

4 个答案: