当您模糊DOM元素时会发生什么 [英] What happens when you blur a DOM Element
问题描述
我的天真的假设是，浏览器不能遍历DOM以找到下一个可焦点元素 - 但是给出以下jsfiddle，这显然不是会发生什么。
<！ ----------------------------- - >
< body>
< div id =roottabindex =0> root
< div id =p1tabindex =0> p1
< div id = p2tabindex =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，希望将焦点移动到dom到p1 ）;
event.stopPropagation（）;
p2.blur（）;
if（document.activeElement！== p1）
console.log（好吧，那没有那么好（）;
console.log（focused element =）;
console.log（document.activeElement）;
}，false）;
p2.focus（）;
console.log（focused element =）;
console.log （document.activeElement）;
那么有什么定义应该发生什么？ Chrome是 activeElement 跳转到正文 - 并跳过所有可点击的项目，不清楚如果没有其他重点，身体是否集中，或者只是 activeElement 的默认处理程序。
给定复杂的面向对象的javascript a p2不知道p1，但是假设DOM中的任何东西都会获得关注，我真的假设在每个 blur（）事件并搜索可重点的元素，并自己关注他们？
与规范有关的最接近的事情可能是< HTML5 CR中的一个href =http://www.w3.org/TR/html5/editing.html#focus =nofollow>对焦点的描述（正在进行中，草稿文件，并可随时更新，替换或废弃其他文件，但在实践中接近一致）。它说：可能没有元素集中;当没有元素被聚焦时，由文档接收的关键事件必须针对body元素，如果有的话，或者在Document的根元素中，如果有的话。如果没有根元素，则不能触发关键事件。
由于 blur（）方法是定义（在 DOM 2 HTML 规范），只是删除焦点，它意味着在没有元素聚焦的状态下离开页面。但这可能看起来像 body 元素的重点：如果你有一个 keypress 属性，那么它被触发。然而，这与集中的状态不同。例如，在这种情况下， body 元素不符合CSS选择器：focus 。
结论是您通常应避免使用 blur（）并执行 focus（）在一些合适的可重点的元素，而不是其他答案建议。一个例外是您只想丢弃所有键盘事件的情况。然后 blur（）是可以的，只要您的代码不会将任何键盘事件处理程序分配给正文元素。 / p>
I am having a hard time finding any documention on what is "suppose" to happen whenever a DOM element is blured.
My naive assumption was that the browser whould traverse up the DOM to find the next focusable element - but given the following jsfiddle, that is obviously not what happens.
<!-- 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);
So is there a definition of what should happen? What I see happening with Chrome is that the activeElement jumps to the body - and skips all of the focusable items along the way. It is unclear if body is even focused, or is just the default handler for activeElement if nothing else is focused.
Given a complex object-oriented javascript application, in which p2 does not know about p1, but assumes that anything higher up in the DOM will gain focus, am I really suppose to manually traverse up the DOM on every blur() event and search for focusable elements and focus them myself?
The closest thing to a specification about this is probably the description of focus in HTML5 CR (which is work in progress, "a draft document and may be updated, replaced or obsoleted by other documents at any time", but in practice close to a consensus). It says: "There may be no element focused; when no element is focused, key events received by the document must be targeted at the body element, if there is one, or else at the Document's root element, if there is one. If there is no root element, key events must not be fired."
Since the blur() method is defined (in DOM 2 HTML spec) simply as removing focus, it means leaving a page in a state where no element is focused. But this may look like the body element were focused: if you have, say, a keypress attribute on it, it gets triggered. This however differs from the focused state. For example, in this situation, the body element does not match the CSS selector :focus.
The conclusion is that you should normally avoid using blur() and do focus() on some suitable focusable element instead, as suggested in other answers. An exception is a situation where you just want to discard all keyboard events. Then blur() is OK, provided that your code does not assign any keyboard event handlers to the body element.
这篇关于当您模糊DOM元素时会发生什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
