JavaScript MouseOver / Mouseout Children Events

Question

Eu tenho um elemento com alguns elementos filhos. Quando o mouse deixa o elemento pai, quero esconder os pais e seus filhos. Problema que estou tendo é que, quando passe o mouse sobre qualquer uma das crianças, o evento do MouseOut está sendo demitido. Qual é a melhor maneira de evitar isso? Eu realmente só quero que o evento atire quando o mouse não estiver dentro dos pais ou de seus filhos.

Answer 1

O evento está borbulhando da criança para o pai (onde está sendo pego)

Você deve pegar o evento nas crianças adicionando um ouvinte e fazendo a propagação parar por aí.

Este código impedirá que o evento borbulhe até o manipulador dos pais

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

Pergunta: O evento Off do Mouse é demitido pelos pais, quando não deve. O mouse sobre a criança não deve desencadear um mouse do pai. Como podemos parar isto?

Answer 2

Você só precisa de um manipulador de mouset anexado ao elemento pai. Mas...

Você precisa verificar se o pai é realmente o alvo do evento MouseOut, em oposição ao evento borbulhando de um dos filhos. Verifique o Event.Target (W3C) e o Event.SRCELEMENT (IE).

Você também precisa verificar se o elemento que o mouse estará entrando não é descendente dos pais. Verifique o Event.RelatedTarget (W3C) e o Event.ToElement (IE).

Answer 3

A partir de http://api.jquery.com/mouseover/:

mouseover dispara quando o ponteiro também se move para o elemento filho, enquanto mouseenter dispara apenas quando o ponteiro se move para o elemento ligado.

E o mesmo vale para mouseout vs. mouseleave