Internet Explorer 4 mouse events
January 19, 1999
Testing whether the mouse has passed off the
menu window in Internet Explorer 4.
function testOut(topic)
{ toElement=window.event.toElement;
if (toElement)
{
if (toElement.id!="backdrop")
{ inside=eval(topic+".contains(toElement)");
if (!inside)
{ clearPop2=self.setTimeout("self.resizeTo(0,0);
opener.focus()",1000);
}
}
}
else { clearPop2=self.setTimeout("self.resizeTo(0,0);
opener.focus()",1000);
}
}
|
The testOut() function exists for the sake of Internet
Explorer 4. An important aspect of the pop-up
menus is not only how they pop-up, but how they disappear.
Towards this end there are a set of "rules"
governing the un-popping of a menu, as it were:
- When the menu pops up, the user has 5
seconds to move the mouse pointer over the menu window;
otherwise, the window will disappear.
- When the user moves the mouse pointer
over the menu window, it will remain popped indefinitely,
until ...
- When the user moves the mouse pointer off the menu window
it will disappear after 1 second. If the user moves
the mouse pointer back over the menu window before 1 second
has elapsed the menu window will revert to rule #2.
Ultimately, then, the testOut() function serves to
enact rule #3 within Internet Explorer. Why only Internet
Explorer? The Internet Explorer event model is somewhat
different from the Netscape event model. Namely, Internet
Explorer sports a concept known as "bubbling".
When an event, such as a MouseOut, occurs as an element,
that element may or may not handle that event (meaning,
execute some code when the event fires). Unless specifically
stopped from bubbling, however, the event then triggers
("bubbles") at the next element in the object
model hierarchy. So, for a
hyperlink inside a table which
is inside a
DIV
block, moving the mouse pointer off the
hyperlink would trigger a MouseOut at the link element,
then at the table element, and then at the DIV element.
Why does any of this matter? The entire menu which appears
in the menu window resides within a layer, also known
as a
DIV block in Internet Explorer.
We want to know when the mouse pointer leaves this layer.
If we merely test for a MouseOut
at this DIV block, however, the event will trigger
anytime the user moves the mouse across elements within the
menu -- because moving over an element means moving
off another, thereby generating a MouseOut which bubbles up
to the DIV block. Oy!
To test rule #3, then, we have concocted testOut().
This function checks just which element the mouse
has passed onto, via the window.event.toElement
property. If this destination element is not a child of
the DIV block then we know the mouse has truly passed off
the menu layer rather than off an element within the
menu. Should this be true the 1 second timer is set to
minimize and hide the menu window, effectively causing it
to disappear according to rule #3.
A Cross Browser Dictionary
DHTML Pop-Up Menus: A Parable of Triumph and Loss (Based on a True Story)
Setting up the menu's layers
|
