Javascript MouseOver / MouseOut Kids Events

Question

I have an element with some children. When the mouse leaves the parent element, I want to hide the parent and his children. The problem I am facing is that when I hover over any of the children, the mouseout event is fired. What is the best way to prevent this? I really want the event to fire when the mouse is not in the parent or any of them.

Answer 1

The event is bubbling from the child to the parent (where it is captured)

You must catch the event on the children by adding a listener and stopping the distribution there.

This code will stop the event from bubbling to the parent handler

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

Question: The mouse event is disabled by the parent, if it is not. The mouse above the child should not call the mouse from the parent. How can we stop this?

Answer 2

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

You need to verify that the parent is the mouseout event object, as opposed to an event raised by one of the children. Check event.target (W3C) and event.srcElement (IE).

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

Answer 3

http://api.jquery.com/mouseover/:

mouseoverIt fires when the pointer moves to the child element, and mouseenteronly fires when the pointer moves to the associated element.

and same for mouseoutvsmouseleave