Evento en estructura jerárquica del DOM

[dggluz]

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!

[dggluz]

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!

[zerokilled]

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

[dggluz]

Gracias Zerokilled, ahora lo reviso. ¡Suerte!