onmouseout onmouseover element parent event handlers problem – child events cause parent to trigger

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.

 
[SHORTCODE_Insert_Google_Adsence_Here]
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 Problem:

The mousing of the child div that uses onmouseover – causes the parent “onmouseout” to trigger.

 

The Solution:

Along with JQUERY – Use the “mouseenter” and “mouseleave” on the parent div instead – the child elements will not effect the “onmouseleave”

Use Example:
Continue reading “onmouseout onmouseover element parent event handlers problem – child events cause parent to trigger”