Javascript MouseOver / MouseOut children events

Question

I have an element with some child elements. When the mouse leaves the parent element I want to hide the parent and it's children. Problem I'm having is that when I hover over any of the children, the mouseout event is being fired. What's the best way to prevent this? I really only want the event to fire when the mouse is not within the parent or any of it's children.

Answer 1

The event is bubbling up from the child to the parent (where it is being caught)

You should catch the event on the children by adding a listener and making the propagation stop there.

This code will stop the event from bubbling up to the parents handler

function onMouseLeave(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

Answer 2

This very similar to this question Onmouseover child div problem and event bubbling which I answered

Answer 3

You only need a mouseout handler attached to the parent element. But...

You need to check that the parent is actually the target of the mouseout event, as opposed to the event bubbling up from one of the children. Check event.target (W3C) and event.srcElement (IE).

You also need to check that the element that the mouse will be entering is not a descendant of the parent. Check event.relatedTarget (W3C) and event.toElement (IE).