Web Development➝Mouseover events from moving DOM elements

If we take a look at the specification for mouseover events we see that it states

A user agent must dispatch this event when a pointing device is moved onto the boundaries of an element.

It's a similar story for mouseout events too.

So what should happen if the pointing device doesn't move but an element moves underneath it? Well if we take the specification literally, then nothing. Let's see what the browsers do. Try it yourself, leave your mouse pointer stationary over the element below, any mouseover/mouseout event fired on the inner div as it appears and disappears will be displayed below the container.

Chrome (tested in v21) and IE 9 both obey the spec to the letter, not triggering any mouseover or mouseout events when the mouse is stationary. Firefox (tested in v14) however behaves differently, firing a mouseover event when the element appears underneath the cursor, and a mouseout event when the element disappears again.

You can also do the same with a moving element instead of one that appears and disappears, the results are the same.

Call me a relativist, but personally I prefer the Firefox approach. I guess most of the time you're not going to notice the difference, but in certain situations it is useful to have that mouseover/mouseout event fire at the moment the cursor and element change whether they are in contact, rather than having to wait until the mouse is next moved.

I won't go into the specifics of the situation where I came across this behaviour, I'll leave you to imagine your own more exciting examples!