Question

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 examples work as expected, the hide when clicking on “Close” or leaving the “Close” div.

The first two examples set a new innerHTML to the div whenever the mouse moves in it (I’d never do that myself, but…).
So, when moving the mouse into one of them they get expanded. And moving the mouse further on a link or the “close” div, more move events get fired.

But then, clicking on the close button in the second example – without moving the mouse -, instead of a click event two mousemove events are fired! What exactly happens here? I can understand that the click event gets lost in some way (loosing its target?) when resetting innerHTML, but why is the mousemove event fired before?

Answer 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.