problema con mouseover

[ccsaiKo]

Hola a todos que tal?
Bueno me encuentro con el siguiente problema .

Tengo dos div uno padre y otro hijo .

Código HTML:

<div id='padre'>
   <div id='hijo'></div>
</div> 

Al div padre le agrego un evento mouseover.

Código HTML:

document.getElementById('padre').addEventListener('mouseover',functOver,true);
function functOver()
{
alert('sobre div padre');
}

El problema es el siguiente, cuando entro a div padre me aparece la alerta (cosa que es lo esperado, pero cuando se entra a div hijo, vuelve a tirar el mensaje.)

es como si los dos tubieran el evento.
Que es lo que se debe hacer ?
Muchas gracias.

[ryugen]

Te recomendaría que utilices mouseenter para lograr lo que estas buscando

Código Javascript:

document.getElementById('padre').addEventListener('mouseenter',functOver,true);
function functOver()
{
     alert('sobre div padre');
}
 

Ahi la función se dispará una única vez

[zerokilled]

¡buenas!
ese comportamiento es muy normal. no hay nada que puedas hacer para controlar cuando se invoca el handler. lo que si puedes hacer es decidir si procesar el handler o no bajo ciertas circunstancias. por ejemplo, si quieres que el handler se invoque solo cuando se entre al elemento deseado, entonces en el handler tienes que comprobar cuál elemento fue quien inicio el evento y determinar si es el deseado. si no es el deseado, entonces sales del handler. para saber el elemento que inicio el evento, lees la propiedad event.target del objeto Event recibido en el handler.

[ryugen]

Ya no puedo editar mi primera entrada, pero la solución que puse no es correcta. El código necesario sería así, esta testeado y te dejo un ejemplo:

Código Javascript:

var dentroPadre = false;
document.getElementById('padre').addEventListener('mouseenter',functOver,true);
function functOver()
{
    if(!dentroPadre){
         this.innerHTML += 'sobre div padre';
    }
    dentroPadre = true;
}
document.getElementById('padre').addEventListener('mouseleave',functLeave,true);
function functLeave()
{
    dentroPadre = false;
}
 

Acá el ejemplo funcionando: http://jsfiddle.net/p4bl1t0/z7kp7/

[ccsaiKo]

gracias ! los probare :)..
pero a que se debe este comportamiento ? ..

uno entra al div padre y si entra al div hijo, es como si salieras y volvieras a entrar nuevamente al div padre.

entras-sales-entras.

[zerokilled]

la situación es más o menos la siguiente. aunque tu no lo veas de forma explicita, el navegador siempre esta generando eventos. en cada pulsación de tecla o movida del puntero, siempre ocurre un evento. sin embargo, uno no lo percibe porque no hay ningún listener registrado para capturar el evento. tu situación básicamente se debe a dos factores: los elementos siempre inician los eventos mouseout y mouseover, y por la forma en como "viaja" el objeto Event.

posiblemente la forma que tu lo estas visualizando es algo como "si el elemento esta dentro de otro, entonces no debe volver a iniciarse el evento para el elemento padre". pero no ocurre así. los eventos viajan desde la jerarquía DOM más alta (usualmente Window) hasta llegar al elemento que lo inició pero recorriendo el camino a traves del DOM. es decir, Window, Document, HtmlElement, BodyElement, y así sucesivamente hasta llegar al elemento. a esta fase se le denomina la fase capture. luego regresa por el mismo camino desde el elemento que lo inició hasta Window, y se le denomina como la fase bubble. si en ese camino que recorre existe algún listener registrado, este captura el objeto Event y determina si es del mismo tipo que el listener (click, mouseover, mouseout, keyup, keydown, etc.) y que la fase en que se encuentra el objeto sea el mismo. si coincide, entonces se lo pasa al handler para procesarse.

Código:

<style>
div, p{ padding: 0.5em; background-color: rgba(204,204,204,.25); border: thin solid #ccc; }
</style>
<div onmouseover="console.log('listener: ' + event.currentTarget.nodeName);">division <p onmouseover="console.log('listener: '+ event.currentTarget.nodeName);">paragraph</p> end</div>

en el ejemplo anterior, cuando mueves el puntero de P a DIV, debes ver en la consola se crea dos registro: "listener P" y "listener DIV". la razón es por como antes explique. cuando P inicia el evento onmouseout, el navegador inicializa un objeto Event que va desde Window hasta P, pero ninguno de los listener lo procesan porque ambos son de tipo bubble. cuando finalmente el objeto Event cambia a bubble, P lo captura y lo procesa. cuando P termina lo regresa al flujo normal. como DIV está en ese camino que recorre el objeto Event, entonces DIV también lo captura y lo procesa. así sucecivamente con el resto de los listener si hubieran más registrados en ese camino recorrido.

este principio básico aplica para la mayoría de todos los tipos de eventos. te recomendaria que busques material sobre el modelo de eventos en navegadores. más que nada para que tengas una idea de como funciona y que cosas puedes hacer. por ejemplo, otra solución podria ser no propagar el objeto Event. es decir, que el listener lo destruye o no lo devuelve al flujo normal, y como resultado el próximo listener no captura el objeto.

[ryugen]

Esta nueva versión está mucho mejor depurada: http://jsfiddle.net/p4bl1t0/z7kp7/3/

Código Javascript:

var dentroPadre = false;
var padre = document.getElementById('padre');
padre.addEventListener('mouseenter',functOver,true);
function functOver(event)
{
    if(!dentroPadre){
         this.innerHTML += ' Sobre div padre + '+ event.target.id;
    }
    dentroPadre = true;
}
padre.addEventListener('mouseleave',functLeave,true);
function functLeave(event)
{
    
    if(event.target == padre){
        dentroPadre = false;
    }
}
 

Ahora nos fijamos que el mouseleave que estamos leyendo sea aquel disparado por el padre solamente. Entonces se logra el objetivo

[zerokilled]

@ryugen, ¿sabías que mouseenter y mouseleave no son compatible en chrome? de hecho, dichos eventos están propuesto para el estándar DOM Level 3 pero la especificación aún se encuentra en etapa Draft.