onmouseout onmouseover event handlers Problem causes child elements event handlers to fire / trigger /actuate – Use mouseenter mouseleave on the parent element instead. It will prevent the child elements from firing as well.
Recently – I found myself in the need of a DIV within a DIV – where they both needed mouse events to be triggered independently, as the user mouses over the parent and then child DIV. The mousing of the child div – caused the parent “onmouseout” to actuate unnecessarily.
The solution is to NOT use “onmouseout” or “onmouseover”.
As “onmouseout” or “onmouseover” are subject to “Event bubbling” as it is known. “event on element2 takes precedence. This is called event bubbling”. http://www.quirksmode.org/js/events_order.html
The mousing of the child div that uses onmouseover – causes the parent “onmouseout” to trigger.
Along with JQUERY – Use the “mouseenter” and “mouseleave” on the parent div instead – the child elements will not effect the “onmouseleave”
It looks like the “addEventListener(‘mouseenter'” and “addEventListener(‘mouseleave'” work on the latest version of Firefox (15.0.1) WITHOUT the need for JQUERY – But Chrome, IE and Safari, all seem to need the jquery library for this to work. Is that to say that mozila now fully supports the use of mouseenter and mouseleave?!?! If so .. YAY! for the browser that actually does things to help developers : )