Cita:
Iniciado por Javier01 
Encontré algunos errores y me sorprende que anduviese en algún explorador
Te paso el código arreglado, pruébalo para saber si te anda, y revisa los cambios que hice.
Saludos
Cita:
Iniciado por furoya Sí, y encima alguno (como el div del comienzo) no era padre sino hermano, y ahí no llegaba.
Por eso puse un ejemplo donde se puede seguir la propagación con alertas. Así ya no quedan dudas.
Recién vi la valoración, muchas gracias.
Gracias a todos por vuestras ideas!
Finalmente (creo que 'finalmente') el código inicial estaba bien: la anidación de los <ul> es correcta...
La cuestión, como me descubrió
furoya, era del proceso de
propagación de eventos, asunto del que yo (novato al 100%) desconocía todo...
Gracias a esto he podido leer muchas cosas en las últimas horas... como tal vez le pase a más personas, y ya que las contestaciones de este foro quedan como una base documental impresionante, me atrevo a copiar sólo una pequeña definición (espero que le sirva a alguien en el futuro: yo he aprendido en este foro más del 75% de lo que aplico...).
De las muchas páginas tanto en castellano como en el idioma del imperio, me quedo con esto:
El flujo de eventos
Si vemos la estructura en árbol de los nodos nos damos cuenta que los elementos hijos están contenidos dentro de un padre. Si hacemos click por ejemplo en un enlace que está contenido dentro de un párrafo estaremos desencadenando el evento onclick en dos elementos del documento.
El flujo de eventos establece el orden en que se ejecutan los eventos y como ya os podeis imaginar, suele ser diferente en cada navegador.
Event bubbling:
En este modelo de flujo de eventos se produce primero el evento en el elemento más interno de la estructura de árbol y va subiendo jerárquicamente hasta llegar al nodo raíz.
Código HTML:
<html onclick="evento()">
<head><title>Event bubbling</title></head>
<body onclick="evento()">
<p onclick="evento()">
<a href="#" onclick="evento()">Dispara el evento</a>
</p>
</body>
</html> En este ejemplo se ejecutaría primero el evento del enlace, seguido del evento del párrafo, seguido del evento del body y por último el evento del documento html.
Event capturing:
En este modelo de flujo de eventos se prodce primero el evento del elemento más externo de la estructura de árbol y va bajando jerárquicamente hasta llegar al elemento más interno.
En el mismo ejemplo de antes se ejecutaría primero el evento del documento html, seguido del evento del elemento body, seguido del evento del párrafo y por último el evento del enlace.
El flujo de eventos del DOM:
El flujo de eventos definido en el estandar del DOM soporta los dos modelos anteriores, pero el event capturing se ejecuta en primer lugar, seguido del event bubbling. Además, incluyen el objeto window del BOM."
esto es de [URL="http://parasitovirtual.wordpress.com/2010/07/13/curso-javascript-capitulo-10-eventos/"]http://parasitovirtual.wordpress.com/2010/07/13/curso-javascript-capitulo-10-eventos/[/URL]
Para controlarlo en IE, en [URL="http://www.dhtmlya.com.ar/temarios/descripcion.php?cod=64&punto=62"]http://www.dhtmlya.com.ar/temarios/descripcion.php?cod=64&punto=62[/URL] encontré un truco fácil:
Código Javascript
:
Ver originalwindow.event.cancelBubble=true;
que se coloca dentro de la función
Para ejemplificar mejor he añadido al código inicial un nodo más (Mi Madre) para que se vea mejor el efecto pretendido, y ver que efectivamente funciona...
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript">
function alternar(Seccion){
window.event.cancelBubble = true
Seccion = document.getElementById(Seccion);
if (Seccion.style.display=="none"){Seccion.style.display="block"}
else{Seccion.style.display="none"}
}
function abreFicha(link1) {
window.event.cancelBubble = true
window.open(link1,"nueva");
}
</script>
</head>
<body >
<div id='parte1' style='display:block;'>
<div id='ni1' style='display:block;' onClick="alternar('lni1');">Arbol Geneálogico</div>
<ul id='lni1' style='display:none;' >
<li id="ni1dr1" onClick="alternar('lni1dr1');" style='display:block;'>Yo mismo </li>
<ul id='lni1dr1' style='display:none;' >
<li id='ni1dr1dp1' onClick="alternar('lni1dr1dp1');" style='display:block;' >Mi Padre</li>
<ul id='lni1dr1dp1' style='display:none;' >
<li id='ni1dr1dp1s1' onClick="alternar('lni1dr1dp1s1');" style='display:block;'>Mis Abuelos Paternos</li>
<ul id='lni1dr1dp1s1' style='display:none;' >
<li id='lni1dr1dp1s1e1 'style='display:block;' onClick="abreFicha('http://www.ikea.com');" >Mi Abuelo Paterno</li>
<li id='lni1dr1dp1s1e2' style='display:block;' onClick="abreFicha('http://www.elpais.com');"> Mi Abuela Paterna </li>
</ul>
</ul>
<li id='ni1dr1dp2' onClick="alternar('lni1dr1dp2');" style='display:block;' >Mi Madre</li>
<ul id='lni1dr1dp2' style='display:none;' >
<li id='ni1dr1dp2s1' onClick="alternar('lni1dr1dp2s1');" style='display:block;'>Mis Abuelos Maternos</li>
<ul id='lni1dr1dp2s1' style='display:none;' >
<li id='lni1dr1dp2s1e1 'style='display:block;' onClick="abreFicha('http://www.abc.es');" >Mi Abuelo Materno</li>
<li id='lni1dr1dp2s1e2' style='display:block;' onClick="abreFicha('http://www.pagina12.com');" >Mi Abuela Materna</li>
</ul>
</ul>
</ul>
</ul>
</div>
</body>
</html> Lo podeis ver funcionando en [URL="http://perso.ya.com/azarces/proba6.html"]http://perso.ya.com/azarces/proba6.html[/URL]
Seguro que se puede mejorar... y seguiré aprendiendo
Gracias a todos por contestar!!!
Saludos cordiales from Spain
