鼠标悬停和鼠标移出事件会不匹配吗？

Question

I'm trying to track if mouse is within my HTML element or not (note: it also has child elements). The trivial solution (which I'm employing right now) is to attach to mouseover / mouseout and count them - if there are more " mouseovers " than " mouseouts ", then the mouse should be within.

But I wonder - can this fail? Can either of these events be "skipped" under some (more or less bizarre) circumstances, leaving me with a mismatched count?

A few simple trials didn't yield any such situations, but then there are a lot of edge cases and I can't possibly think of them all. Has anyone ever come across such a situation?

Clarification: I have not come across such a problem. I'm wondering if such a problem is possible or not.

Added: A case just came to my mind - a mouseover / mouseout on a child element which is prevented from bubbling in its handler. Not the case for my code, but a possibility still.

Answer 1

I have had similar things happen.. driving me crazy. I came to the assumption/conclusion that, at least in my case, it may have had something to do with event bubbling. Are you using jquery? It may be worth while to step though the uncompressed libraries.. if you really need the guarantee. Otherwise, if your code is flexible enough, you could work around it..which is what I did.

Answer 2

Bubbling is very likely the source of the problem. You get a mouseout event when the mouse moves into an inner element. http://www.quirksmode.org/dom/events/mouseover.html

Suggestion, use a library. They abstract cross browser differences between the mouseenter and mouseleave events which do not bubble. http://api.jquery.com/mouseenter/

If you don't want to use a library, you need to check yourself if the mouse is within the div you're tracking before you fix the counter. If you show the code you have, it's easier to show you how to fix it.