ActiveElement property of document object usage and behavior?
the activeElement property of the document object sets the current element that has keyboard focus.
But I see strange behavior:
If I hover the mouse over the image / anchor the activeElement shows
<body>
If I right click on the anchor the ActiveElement shows
<a href=....
If right click on the image, activeElement shows
<body>
Can someone please exaplain the correct behavior?
I am using Firefox.
console.log(document.activeElement);
source to share
Only those elements that are " focusable " can have focus. Unlike a link or text box for an image element, "focus" is (ironically) pretty much meaningless and so the spec does not list it among the elements that should be orientable, but most (all?) browsers follow suit.
When you right-click on an element, it "blurs" the previously focused element (if any) and "without any other element explicitly focused in place, the user agent should synchronously perform focus steps for the body element, if any. one "- in other words, because the image is not focusing, it focuses the body element instead.
If you require focal behavior on an image or other unmanaged element, the best solution is usually to wrap it in a link.
source to share