Rick Strahl's Weblog  

Wind, waves, code and everything in between...
.NET • C# • Markdown • WPF • All Things Web
Contact   •   Articles   •   Products   •   Support   •   Advertise
Sponsored by:
Markdown Monster - The Markdown Editor for Windows

OnMouseOut and reliably trapping element mouse exit - or not!


:P
On this page:

 

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.


The Voices of Reason


 

Fredrik
April 18, 2006

# re: OnMouseOut and reliably trapping element mouse exit - or not!

Have struggled with the same problem several times, and have usually given up and instead gone for having the floating div disappear once it looses focus - I do this then by hooking up to the document body's click event when I show the div and when it fires, hiding the div. That gives you a nice click-anywhere-outside-the-hovering-div-to-make-it-disappear effect, which is what most users will probably try to do to make it disappear aswell :)

Darrell
April 18, 2006

# re: OnMouseOut and reliably trapping element mouse exit - or not!

Rick,

Try this link. It has some javascript code and the example that reads "Persistent with links" might be what you need.

http://javascript.internet.com/navigation/pop-up-link-with-description.html#source

Darrell


Tim Haines
April 18, 2006

# re: OnMouseOut and reliably trapping element mouse exit - or not!

Put one of the bears onto it.

Rick Strahl
April 19, 2006

# re: OnMouseOut and reliably trapping element mouse exit - or not!

You haven't seen those guys eat - uh, use a mouse before have you? <g>

DMCK
April 25, 2007

# re: OnMouseOut and reliably trapping element mouse exit - or not!

I think the issue is to do with 'event bubbling'

http://www.dynamic-tools.net/toolbox/isMouseLeaveOrEnter/

may help

fatii
September 13, 2012

# re: OnMouseOut and reliably trapping element mouse exit - or not!

i was struggling over the same mouseout issue for div..
came across a solution, thats probably better i feel..
i attach a hover event to the css class of that div, and i can define 2 methods,
1 for hover in, and other for hover out..
n wollah! i can define my events or just set the div's display to none ;) :)

Fatima

West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2024