Forum Moderators: open
Basically I need to catch when the mouse leaves the window. I've tried applying an onmouseout event to the window (nothing happens) and both the document and body. The document and body events work fine except the event fires when the mouse moves over a child element (like a table or DIV) of the body. I only want it to fire when I totally leave the body(window)...
I thought of putting onmouseover events on all child elements to cancel the action/bubble before realising that this is just an unworkable solution.
Anybody got any ideas?
Thx, josh
- the mouse leaves the element
- the mouse moves over OR leaves a child element.
I'm sure there must be a way :/
the onmouseleave event handles exactly what I'm after. Found it at MSDN [msdn.microsoft.com] - I'm pretty sure it's an IE only event.
:)
(There's an onmouseenter event too.)
I just located an idea that might point toward a more cross-browser solution. The idea is to stay with onmouseout, but because of event bubbling test it in IE with a condition like this:
if (!el.contains(event.toElement))
Can't quite wrap my brain around whether this makes Netscape-compatible code a possibility or not, but I'm keeping it in mind. Because Netscape events trickle down, rather than bubbling up the way they do in Explorer, a child mouseout shouldn't trigger the event in the parent element in Netscape, right?
Here's the reference [siteexperts.com].
- onmouseleave will be ignored by NN and opera.
- an if statement in your onmouseout event that sniffs for IE. If (IE) {don't do anything} else {eventHandler()}
What do you think? Probably easier to read and arguably more efficient. Are there W3C standards on this kind of thing that somebody's breaking or are they all making it up as they go along?
> ...an if statement in your onmouseout event that sniffs for IE
There's one challenge with checking each onmouseout event - an awful lot of them can be triggered as the mouse moves across all the page elements. That means running a lot of little instances of any kind of checker script.
I'll probably back burner this one for now. Then again, way my life goes, I'll probably need it before the end of next week!
Surely this would be the case with the
if (!el.contains(event.toElement))
if statement too though?
Ideally you'd probably insert the events server side (onmouseleave for IE and onmouseout for NN) otherwise you could always create pointers when the doc loads up.
<script>
function setup()
{
if (IE)
{
document.body.onmouseleave = handleOut;
}
else
{
document.body.onmouseout = handleOut;
}
}
</script><body onload="setup()">
I don't know if NN4 could deal with the above though I think NN6 would be happy.
<added>
As only ie supports assigning pointers to functions in the way I used above (just tried it) the required effect could have been achieved quite neatly as follows.
<body onmouseout="handleOut()">
<script>
document.body.onmouseleave = handleOut;
document.body.onmouseout = null;
</script>
This would have removed the onmouseout event in IE and created an onmouseleave event. Since 'document.body.onmouse______ = _____;' is only supported in IE all other browsers would have been left with the 'onmouseout="handleOut()' specified in the body. TaDa!
</added>
OK - that's all a bit messy but I'm sure you get the gist of what I'm trying to do...
(edited by: joshie76 at 2:31 pm (utc) on Mar. 22, 2002)
Netscape 4 wouldn't wake up at all.
Opera 6 will fire onmouseout on a div tag wrapping the whole body content.
Netscape 6 will fire an onmouseout event for the body.....
The bad news: Both Opera 6 and N6 exhibit similar behaviour to IE's onmouseout event - with the event firing when you move over a child element. So we're back at square one for a cross-browser solution.
Josh
OK, but it's not totally square one, because we now have the concept of testing each onmouseout event to see if it was generated by a child element, or if it truly was the mouse leaving the body.
NN6 and Opera6 both support DOM pretty well. The DOM contains a relatedTarget property for mouseout (or mouseover) that corresponds with Explorer's toElement (or fromElement) property.
Opera 5+ and Netscape 6 also support the contains() method — so we're back in business! We can test if the mouseout event is really from the body in NN6 and Opera6.
And that means (hopefully) AOL 8 compatibility, whenever they start mailing out the coasters. I will leave the exact code as a homework exercise for the end of next week ;)
Not surprising. Netscape 4 only supports mouseover and mouseout events for the anchor tag - you can't even trigger them from an image.
Our site has them and the rows rollover... (site in profile).
The dropdown menus themselves that 'popup' have a rollover effect, even in NN4. It looks like a table cell changing background colour but I didn't realise you could do that in NN4.
I've just never got round to digging through the code as, you no doubt know, most of my work is IE specific.
From what I can see, it's still done with swapped images. They're just made to look like a hover style...you're right, NN4 wouldn't support a "true" hover.
And the mouse events are always in the anchor tags.
(edited by: tedster at 11:46 am (utc) on Mar. 24, 2002)
Josh
The code captures the mouse events from the anchor, as you said, and then it writes new fontColor and bgColor into a clipped layer to imitate a hover effect. What a labor that must have been. I see by the copyright that Macromedia extends credit back to Gary Smith at Netscape in 1997.
Whew!
