Foros del Web » Programando para Internet » Javascript »

Evento en estructura jerárquica del DOM

Estas en el tema de Evento en estructura jerárquica del DOM en el foro de Javascript en Foros del Web. Buenas: les consulto por lo siguiente: tengo una lista que puede contener n sublistas; quiero que al hacer click sobre algún elemento que tenga hijos, ...
  #1 (permalink)  
Antiguo 27/01/2010, 23:00
Avatar de dggluz  
Fecha de Ingreso: abril-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 525
Antigüedad: 15 años, 2 meses
Puntos: 50
Evento en estructura jerárquica del DOM

Buenas: les consulto por lo siguiente: tengo una lista que puede contener n sublistas; quiero que al hacer click sobre algún elemento que tenga hijos, éstos se "escondan" o se muestren (toogle). La estructura HTML correcta para este tipo de listas es la siguiente:
Código HTML:
<ul>
    <li>Item 1</li>
    <li>Item 2
    	<ul>
            <li>SubItem 1</li>
            <li>SubItem 2
            	<ul>
                    <li>SubSubItem 1</li>
                </ul>
            </li>
            <li>SubItem 3</li>
        </ul>
    </li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul> 
Como se puede ver, las sublistas están contenidas en el elemento LI del que son sublistas. El problema es que si yo hago click en el SubItem 2 (por ejemplo) para "esconder" el SubSubItem 1, al mismo tiempo que disparo el evento onclick del SubItem 2, disparo a la vez el evento onclick del Item 2, es decir del parentNode e incluso de todos los "antecesores". Esto no es un error, es un efecto no deseado pero tiene sentido (así como en todos los casos estaría disparando el evento para el body). La consecuencia de ello es que no sólo se oculta el ítem que quiero ocultar, sino todos sus antecesores, exceptuando el de mayor jerarquía.
La implementación la estoy haciendo en jQuery, pero no viene al caso porque es un problema de javascript en sí mismo. ¿Alguna idea?. ¡Muchas gracias! ¡Suerte!
  #2 (permalink)  
Antiguo 27/01/2010, 23:14
Avatar de dggluz  
Fecha de Ingreso: abril-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 525
Antigüedad: 15 años, 2 meses
Puntos: 50
Respuesta: Evento en estructura jerárquica del DOM

Me contesto a mí mismo (acabo de encontrar la solución ): es tan sencillo como agregar return false; al final de la función. Con eso evito que siga ejecutando el evento en los parentNodes. Disculpen las molestias. ¡Suerte!
  #3 (permalink)  
Antiguo 28/01/2010, 11:04
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 3 meses
Puntos: 1485
Respuesta: Evento en estructura jerárquica del DOM

por lo que explicas, tu problema me parece que es sobre la propagacion de eventos. un articulo que Panino nos comparte de vez en cuando puede que te ayude a comprenderlo. http://kusor.net/traducciones/brainj...vents1.es.html
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #4 (permalink)  
Antiguo 28/01/2010, 12:53
Avatar de dggluz  
Fecha de Ingreso: abril-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 525
Antigüedad: 15 años, 2 meses
Puntos: 50
Respuesta: Evento en estructura jerárquica del DOM

Gracias Zerokilled, ahora lo reviso. ¡Suerte!

Etiquetas: dom, estructura, eventos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:58.