JavaScript Mouseover / MouseOut Children Events

Question

Tengo un elemento con algunos elementos infantiles. Cuando el mouse deja el elemento principal, quiero ocultar al padre y sus hijos. El problema que estoy teniendo es que cuando me paseé sobre cualquiera de los niños, el evento de ratón está siendo despedido. ¿Cuál es la mejor manera de evitar esto? Realmente solo quiero que el evento dispare cuando el mouse no está dentro del padre ni ninguno de sus hijos.

Answer 1

El evento está burbujeando del niño al padre (donde está siendo atrapado)

Debe ver el evento en los niños agregando un oyente y haciendo que la propagación se detenga allí.

Este código evitará que el evento burbujee al manejador de los padres.

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

PREGUNTA: El evento del mouse de apagado es despedido por el padre, cuando no debería. El mouse sobre el niño no debe activar un mouse del padre. ¿Cómo podemos detener esto?

Answer 2

Solo necesita un controlador de ratón conectado al elemento principal. Pero...

Debe verificar que el padre sea en realidad el objetivo del evento MouseOut, a diferencia del evento burbujeante de uno de los niños. Verifique Event.Target (W3C) y Event.SrCelement (es decir).

También debe verificar que el elemento que ingresará el mouse no es descendiente de los padres. Verifique Event.RelatedTarget (W3C) y Event.toelement (es decir).

Answer 3

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

mouseover se dispara cuando el puntero se mueve al elemento infantil también, mientras mouseenter dispara solo cuando el puntero se mueve hacia el elemento encuadernado.

y lo mismo va para mouseout VS mouseleave