Onmouseover Fired Before Click And Mouseout Events?

Unusable links with onmouseover() got an interesting question, when I tried to answer it. After some logging experiments, I've set up http://jsfiddle.net/RnGxP/1/. The last two exa

Solution 1:

You are rewriting the innerHTML of the div element in the mouseover event. This means that each time you move the mouse it is in fact moving over a new node, which triggers a new mouseover event on that node, which bubbles up to the div element, which rewrites the innerHTML etc. etc.

So by the time the mouseout event fires on the inner div, the mouseover event has already rewritten the innerHTML on the outer div, and so the inner div has no parent...

What you really want to use is the mouseenter event (and presumably the mouseleave event on the inner div), which used to be proprietary to Internet Explorer but according to MDN Firefox 10 and Opera 11.10 support it too.