Example continued...
Because mouse events are always targeted at the most deeply nested
element underneath the mouse pointer. In this case, mouseout
events are fired for the menu item's A tags as you move the mouse over
them. These bubble back up to the menu DIV tag where they trigger the
handler set for it, calling
closeMenu()
which hides the menu.
To get around this, code has to be added to closeMenu()
to
determine where the mouse is moving to. If it's moved onto an element within the
menu DIV, it should ignore the event. Only when it moves onto an element outside
the menu DIV should it hide the menu.
Here's an update version of closeMenu()
which checks the
Event
object to find out what element the mouse has moved onto:
function closeMenu(event) { var current, related; if (window.event) { current = this; related = window.event.toElement; } else { current = event.currentTarget; related = event.relatedTarget; } if (current != related && !contains(current, related)) current.style.visibility = "hidden"; }
The variable related
is set to the element that the mouse is
moving onto while current
is always the menu DIV itself. If the
related
element is the menu DIV itself or is nested within the menu
DIV, the event is ignored. Otherwise, the menu is hidden.
The function contains()
has been added to determine if one
element is nested inside another. The code looks like this:
function contains(a, b) { // Return true if node a contains node b. while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; }
You can try the modified version with the link below:
Now the menu behaves as desired, closing only when the mouse is moved completely off of it.
Conclusion
Now you should have a basic understanding of the DOM event object. While there are some pitfalls to watch out for, mostly caused by browser-specific implementations, you can use this information to code towards the standard model and work out individual differences between browsers with a minimum amount of coding.
- Tutorial Introduction
- Mouse and keyboard events
- Example- creating a dropdown menu
- Example continued
Tutorial written and contributed by Mike Hall of BrainJar. Edited/ minor additions by JK. Mike works full time as a professional programmer in Phoenix, Arizona.