onmouseout and reliably trapping mouse exit
I'm struggling again today with JavaScript - my favorite pastime. I'm trying to get a window to pop up and release when focus to it is lost reliably.
I'm talking about something like this:
http://www.west-wind.com/presentations/wwhoverpanel/sample/IFrame.aspx
You hover over the 'highlight' and pop up the window. But when you mouse out of the window it should close. Same with the drop down list for the RSS feed lookup. You bring up the drop down but as soon as you mouse out it should go away without clicking on the close buttons.
Seems simple enough right? The Element object has an onmouseout event that fires and it's easy to trap so you can tell when you leave an element. Unfortunately onmouseout fires when 'leave' the current control and move over a child control. So if you want to capture events on a wrapping <div> tag and you move over a link or table, the onmouseout fires even though you're still inside of the div tag and the mouse in fact has not moved out.
I've been trying a number of different permutations of this but I can't figure out a good way to do get the mouse leaving reliably. Actually in Internet Explorer it's quite easy to do – there's a onmouseleave event which works as you'd expect only firing when you actually leave the container. Unfortunately that is a proprietary event, but man do I wish this was more broadly accepted. I've fought with this one for a while.
With Mozilla I've tried using event.target to try and capture the originating target, but that doesn't work either because the target in most cases is in fact the top level container since the event fires on the container that the mouse is leaving on not the control it's entering. If this worked in reverse you could check the type of the events and then only if it's 'this' would you release the item. But no such luck.
So the only real cross platform solution at the moment is to use a close button, which is Ok in some situations. In these samples it actually works ok, since the popup content is interactive anyway. But it's more of an issue when you have popups that only display content.
I've been searching around online as well without much luck in finding anything. There are tons of examples of onmouseout, but none that use for anything but flash over behavior of a label or simple control.
Bummer.
Other Posts you might also like