1

我很难找到任何有关“假设”在 DOM 元素模糊时会发生什么的文档。

我天真的假设是浏览器会遍历 DOM 以找到下一个可聚焦元素 - 但鉴于以下 jsfiddle，这显然不会发生。

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 并搜索可聚焦的元素和自己集中注意力？

4

4 回答 4

8

与规范最接近的可能是HTML5 CR中对焦点的描述（正在进行中，“一份草稿文档，可能随时被其他文档更新、替换或废弃”，但实际上接近于共识）。它说：“可能没有元素集中；当没有元素被聚焦时，文档接收到的关键事件必须针对 body 元素（如果有），否则针对 Document 的根元素（如果有）。如果没有根元素，则不能触发键事件。”</p>

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

结论是，您通常应该避免使用blur()并focus()改为使用一些合适的可聚焦元素，如其他答案中所建议的那样。一个例外是您只想丢弃所有键盘事件的情况。然后blur()就可以了，前提是您的代码没有为body元素分配任何键盘事件处理程序。

于 2013-11-10T07:50:12.443 回答
0

如果您只想确保一个元素在另一个元素变得模糊时获得焦点：

/* 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调用它的父方法。

于 2013-11-10T07:15:15.950 回答
0

我的理解是，这blur只是意味着不专注。换句话说，被聚焦的元素失去了焦点，并且不确定是什么（如果有的话）获得了焦点。activeElement变成的事实body可能只是一个副作用。而不是将其设置为null它设置为正文，以表明该文档通常仍然具有焦点。

于 2013-11-10T07:25:35.750 回答
-1

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

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

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

谢谢

于 2013-11-10T07:52:31.003 回答