Onmouseover sobre un objeto creado

[salbatore]

Hola foreros!

Tengo un problemilla, jeje... Mirar tengo un objeto que al situarse encima de el se le crea un objeto dentro de el. El problema es que si te situas encima del objeto creado nuevo es como si salieses del objeto que le creo.

Para que engañarnos... me explico de pena... asi que un ejemplo:

http://usuarios.multimania.es/salbatore/

El codigo javascript es super claro... ademas le he puesto comentarios... esos que tanto nos gustan!, jeje.

¿Hago algo mal?, no os podeis imaginar la de comida de tarro que me ha provocado este problema, jeje... despues de descubrir que el error no era por otras razones, al cabo de una semana, jeje... pero aun no se por que no va?... alguien sabe?

[Tecna]

Buenas,
El problema está en que no se propaga el evento al nuevo elemento creado y la solución sería añadir los dos eventos con el método addEventListener( ).
Un saludo.

[salbatore]

Hola Tecna,

¿Pero que eventos deberia ponerle?, es que no entiendo bien, jeje. He mirado mas de una vez el tema de addEventListener pero nunca me queda claro... o lo olvido, jeje. Por ejemplo como actuarian en mi script:

Código PHP:

  <script> 
            function mostrar() 
                { 
                    //creamos el div 
                        eldiv = document.createElement("div"); 
                    //le añadismos el id 
                        eldiv.setAttribute("id", "objeto_dom"); 
                    //le introducimos algo de texto 
                        texto=document.createTextNode("Ahora si te situas sobre mi desaparezco, cuando no deberia desaparecer"); 
                        eldiv.appendChild(texto); 
                    //lo introducimos donde queremos 
                         contenedor = document.getElementById("div_contenedor_dom"); 
                         contenedor.appendChild(eldiv); 
                } 
            function ocultar() 
                { 
                    //seleccionamos el padre 
                        contenedor = document.getElementById("div_contenedor_dom"); 
                    //seleccionamos el elemento que queremos destruir 
                        eldiv = document.getElementById("objeto_dom"); 
                    //lo destruimos 
                        destruir = contenedor.removeChild(eldiv); 
                     
                } 
             
        </script>  
  

¿Donde hago lo de addEventListener y como?

[Panino5001]

Probá así:

Código PHP:

  function mostrar(e) 
                { 
                evt= e || event; 
                var a=evt.relatedTarget || evt.fromElement 
                if(a==document.getElementById("div_contenedor_dom") || a==document.getElementById("objeto_dom")) return; 
                    //seleccionamos el padre 
                    //creamos el div 
                        eldiv = document.createElement("div"); 
                    //le añadismos el id 
                        eldiv.setAttribute("id", "objeto_dom"); 
                         
                    //le introducimos algo de texto 
                        texto=document.createTextNode("Ahora si te situas sobre mi desaparezco, cuando no deberia desaparecer"); 
                        eldiv.appendChild(texto); 
                    //lo introducimos donde queremos 
                         contenedor = document.getElementById("div_contenedor_dom"); 
                          
                         contenedor.appendChild(eldiv); 
                } 
            function ocultar(e) 
                {  
                evt= e || event; 
                var a=evt.relatedTarget || evt.toElement 
                if(a==document.getElementById("div_contenedor_dom") || a==document.getElementById("objeto_dom")) return; 
                    //seleccionamos el padre 
                        contenedor = document.getElementById("div_contenedor_dom"); 
                    //seleccionamos el elemento que queremos destruir 
                        eldiv = document.getElementById("objeto_dom"); 
                    //lo destruimos 
                        destruir = contenedor.removeChild(eldiv); 
                     
                }  
   

[Panino5001]

Ah, me olvidaba: en las llamadas debés usar event:

Código PHP:

  <fieldset id="div_contenedor_dom" onmouseout="ocultar(event);" onmouseover="mostrar(event);"  >  
   

[salbatore]

Hola de nuevo!...

Panino5001!... como no!... oooo... que gusto... llevaba como una semana como un loco, jeje... me parecia un error tan raro, que no paraba de reescribir el codigo, jeje. El problema es que un error como este te salga en un monton de codigo... por lo menos yo dudo hasta de los colores, jeje.

Bueno... funciona fantasticamente como lo hiciste!.... muchas gracia de verdad!

Hasta pronto!

[Panino5001]

Te recomiendo leas esto: http://kusor.net/traducciones/brainj...vents1.es.html

[Tecna]

Buenas,

esta era mi solución:

eldiv.addEventListener('mouseover', function(e) {return mostrar();}, false);

eldiv.addEventListener('mouseout', function(e) {return ocultar();}, false);

El método addEventListener añade eventos a un objeto y acepta 3 parámetros: El primero es el nombre del tipo de evento a añadir, tiene que ir entrecomillado, en minúsculas y sin el prefijo on. El segundo es la función que se debe llamar cuando se produce el tipo de evento y el tercero es un valor booleano que indica si se capturan o no eventos durante la fase de propagación.

dificil ¿eh? podia haberlo dicho en el primer mensaje pero esperaba que intetaras buscar la información y dar con la solución por tus medios que siempre es mas gratificante antes de lanzarte a pedir mas ayuda. Si es un tema que no te quedó claro o se te olvidó éste sería un buen momento para recordarlo. Seguro que encuentras muchos documentación con ejemplos y consultas sobre este tema y otros en la wiki por ejemplo.

Un saludo.

[manyjose]

A ver calale asi:

Código HTML:

<div onmouseout="javascript:ocultar();" onmouseover="javascript:mostrar();"  ><fieldset id="div_contenedor_dom">
<legend align="center">El error</legend>
En este elemento si te situas sobre el se creara un aviso realizado por medio de DOM, el problema es que al situarse encima suyo lo detecta como estar fuera del objeto padre. Solo ocurre con los elementos creados por DOM.
</fieldset>
</div>
 

[manyjose]

A ver calale asi:

Código HTML:

<div onmouseout="javascript:ocultar();" onmouseover="javascript:mostrar();"  ><fieldset id="div_contenedor_dom">
<legend align="center">El error</legend>
En este elemento si te situas sobre el se creara un aviso realizado por medio de DOM, el problema es que al situarse encima suyo lo detecta como estar fuera del objeto padre. Solo ocurre con los elementos creados por DOM.
</fieldset>
</div>
 

[salbatore]

Hola de nuevo!,

He probado los dos codigos y me funcionan perfectamente aunque, la verdad, no se cual es mejor, jeje. En principio he usado el de tipo: eldiv.addEventListener('mouseover', function(e) {return mostrar();}, false); .

Ya lo siento pero despues de leerme todo el manual que Panino5001 me envia aun no he entendido como funciona, jeje. Entiendo que es como añadirle un evento al objeto creado, pero tal vez este buscando otra cosa, jeje.

Mirar despues de probarlo en un codigo que tengo algo mas complejo que el ejemplo me pregunto si lo que en realidad busco es como un actualizador del DOM, es decir, como si reconociese que el objeto que he creado es hijo de un hijo. Es decir... mi pregunta es:

¿Por que cuando creo el objeto con DOM este no es reconcido como hijo?, creo que esa es mi duda, por que en realidad yo no quiero añadir ningun evento particular al objeto particularmente sino a todo el conjunto de hijos del contenedor.

Se que me explico fatal, jeje... pero aun no comprendo como actuar... ¿No existe ningun modo de reiniciar, actualizar o reanudar el DOM?