Databases
StackOverflow2013
Postsdbo
POWhat happens when you blur a DOM Element
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat happens when you blur a DOM Element
    text
    copied!<p>I am having a hard time finding any documention on what is "suppose" to happen whenever a DOM element is blured.</p> <p>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.</p> <p><a href="http://jsfiddle.net/YNuc2/2/" rel="nofollow">jsfiddle-example</a></p> <pre><code>&lt;!-- HTML ----------------------------- --&gt; &lt;body&gt; &lt;div id="root" tabindex="0"&gt;root &lt;div id="p1" tabindex="0"&gt;p1 &lt;div id="p2" tabindex="0"&gt;p2 &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; /* 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); </code></pre> <p>So is there a definition of what should happen? What I see happening with Chrome is that the <code>activeElement</code> jumps to the <code>body</code> - 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 <code>activeElement</code> if nothing else is focused.</p> <p>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 <code>blur()</code> event and search for focusable elements and focus them myself?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload