Today I wanted to catch a 'mouse-out' event in a div. Every time the mouse leaves the div, I want to call a function So.. there's the onmouseout event which, at first sight, does exactly what I needed.

<div id="parent" style="height: 500px; width: 500px;" onmouseout="alert('out!');">
<table id="child"><tr><td>child text</td></tr>
</div>


HOWEVER - if the div contains child elements (it usually does.. like above example), when mouse moves from the "bare naked" div directly to its child element, an 'onmouseout' event is called from the div, while the mouse is still inside the borders of the div. And the worst news is that it's not a bug! 🙂

So straight to the sad solution: onmouseleave event does exactly what I needed, but isn't standard and is IE-only (same goes for onmouseenter). As Rick summed it in the post which solved my issue today: "Bummer."

So bummer, but the good thing is that among the reads, I've found this must-read article which talks about the order browsers handle the events, and how to deal with it.