Foros del Web » Programando para Internet » Javascript »

No funciona en IE, y si funciona en todos los demás...

Estas en el tema de No funciona en IE, y si funciona en todos los demás... en el foro de Javascript en Foros del Web. Hola a tod@s A ver si alguien se le ocurre qué le está pasando a este código, que me lleva varias horas loco... He subido ...
  #1 (permalink)  
Antiguo 23/11/2012, 14:22
 
Fecha de Ingreso: julio-2007
Mensajes: 16
Antigüedad: 17 años, 4 meses
Puntos: 2
Exclamación No funciona en IE, y si funciona en todos los demás...

Hola a tod@s

A ver si alguien se le ocurre qué le está pasando a este código, que me lleva varias horas loco...

He subido el ejemplo en :[URL="http://perso.ya.com/azarces/proba5.html"]http://perso.ya.com/azarces/proba5.html[/URL]

El código es super sencillo y funciona 100% en Firefox, Chrome y Safari... pero no funciona en IE (ni 8 ni 9)

Deduzco que el problema le pasa a IE por tratarse de varios <ul> anidados... aunque cada uno de ellos tiene su propio 'id'.

En IE funciona hasta el 2º nivel, pero a partir de ese, lo que hace es ejecutar dos veces la función (!?), y como el style.display lo ha puesto en 'block', al volver a pasar (sin que nadie se lo haya pedido...) lo pone otra vez en 'none'...

pues eso, que ando loco a ver si descubro qué pasa y como solucionarlo...

Este es el codigo javascript (mas sencillo no puede ser...:
Código javascript:
Ver original
  1. function alternar(Seccion){
  2.     if (Seccion.style.display=="none"){Seccion.style.display="block"}
  3.     else{Seccion.style.display="none"}
  4. }

y este es codigo entero:

Código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<script language="JavaScript">

function alternar(Seccion){ 
    if (Seccion.style.display=="none"){Seccion.style.display="block"}
    else{Seccion.style.display="none"} 
}

</script>
</head>

<body >

<div id='parte1' style='display:block;'>

<div id='ni1' style='display:block;' onClick=alternar(lni1);>Ärbol Geneálogico</div>

<ul id='lni1' style='display:none;' >
	<li id="ni1dr1"  onClick=alternar(lni1dr1);  style='display:block;'>Yo mismo </li>&nbsp;&nbsp;

	<ul id='lni1dr1' style='display:none;'  >
		<li id='ni1dr1dp1'   onClick=alternar(lni1dr1dp1);   style='display:block;' >Mi Padre</li> &nbsp;&nbsp;
			<ul id='lni1dr1dp1' style='display:none;' >
				<li id='ni1dr1dp1s1'  onClick=alternar(lni1dr1dp1s1);  style='display:block;'>Sus Padres</li>
					<ul id='lni1dr1dp1s1' style='display:none;' >
						<li id='lni1dr1dp1s1e1 'style='display:block;' >Mi Abuelo Paterno</li>
						<li id='lni1dr1dp1s1e2' style='display:block;' >Mi Abuela Materna</li>
					</ul>
			</ul>
	</ul>
</ul>

</div>
</body>
</html>
Ayuda, please!!

Última edición por Canal_on; 23/11/2012 a las 14:44 Razón: incluir la dirección en la que he subido el ejemplo
  #2 (permalink)  
Antiguo 23/11/2012, 15:44
Avatar de Javier01  
Fecha de Ingreso: febrero-2008
Ubicación: Montevideo
Mensajes: 261
Antigüedad: 16 años, 9 meses
Puntos: 31
Respuesta: No funciona en IE, y si funciona en todos los demás...

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.

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  3.  
  4. <script language="JavaScript">
  5.  
  6. function alternar(Seccion){
  7.     Seccion = document.getElementById(Seccion);
  8.     if (Seccion.style.display=="none"){Seccion.style.display="block"}
  9.     else{Seccion.style.display="none"}
  10. }
  11.  
  12. </head>
  13.  
  14. <body >
  15.  
  16. <div id='parte1' style='display:block;'>
  17.  
  18. <div id='ni1' style='display:block;' onClick="alternar('lni1');">Arbol Geneálogico</div>
  19.  
  20. <ul id='lni1' style='display:none;' >
  21.     <li id="ni1dr1"  onClick="alternar('lni1dr1')";  style='display:block;'>Yo mismo </li>&nbsp;&nbsp;
  22.  
  23.     <ul id='lni1dr1' style='display:none;'  >
  24.         <li id='ni1dr1dp1'   onClick="alternar('lni1dr1dp1');"   style='display:block;' >Mi Padre</li> &nbsp;&nbsp;
  25.             <ul id='lni1dr1dp1' style='display:none;' >
  26.                 <li id='ni1dr1dp1s1'  onClick="alternar('lni1dr1dp1s1');"  style='display:block;'>Sus Padres</li>
  27.                     <ul id='lni1dr1dp1s1' style='display:none;' >
  28.                         <li id='lni1dr1dp1s1e1 'style='display:block;' >Mi Abuelo Paterno</li>
  29.                         <li id='lni1dr1dp1s1e2' style='display:block;' >Mi Abuela Materna</li>
  30.                     </ul>
  31.             </ul>
  32.     </ul>
  33. </ul>
  34.  
  35. </div>
  36. </body>
  37. </html>
Saludos
__________________
Tomarse un tiempo para redactar correctamente la pregunta, utilizando los signos de puntuación adecuados, es ganar tiempo y calidad en la respuesta.
  #3 (permalink)  
Antiguo 23/11/2012, 16:55
 
Fecha de Ingreso: julio-2007
Mensajes: 16
Antigüedad: 17 años, 4 meses
Puntos: 2
Respuesta: No funciona en IE, y si funciona en todos los demás...

Hola!

Gracias por la ayuda lo primero...

Lo acabo de probar y sigue igual, funciona en Chrome y no funciona en IE

Lo de llamar al elemento con "Seccion = document.getElementById(Seccion);" ya lo había probado... es una de las opciones que ya descarté.

Lo curioso es que ese mismo código lo tengo en otra página que funciona perfectamente en IE (y en los demás, claro).

En esta lo que cambia es lo de los <ul> anidados... aunque cada uno tiene su propio id.

Gracias adelantadas por vuestras contestaciones!
  #4 (permalink)  
Antiguo 23/11/2012, 17:11
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: No funciona en IE, y si funciona en todos los demás...

Cita:
Iniciado por Canal_on Ver Mensaje
Hola!

Gracias por la ayuda lo primero...

Lo acabo de probar y sigue igual, funciona en Chrome y no funciona en IE

Lo de llamar al elemento con "Seccion = document.getElementById(Seccion);" ya lo había probado... es una de las opciones que ya descarté.

Lo curioso es que ese mismo código lo tengo en otra página que funciona perfectamente en IE (y en los demás, claro).

En esta lo que cambia es lo de los <ul> anidados... aunque cada uno tiene su propio id.

Gracias adelantadas por vuestras contestaciones!
Puedo preguntar que es lo que NO funciona, o SI funciona?
la página
http://perso.ya.com/azarces/proba5.html

En todos los navegadores hace lo mismo,
al primer click en "Arbol geneálogico" muestra el alert Ini1, al cerrar el alert muestra el texto "Yo mismo", a un segundo click en "Arbol genealogico" vuelve a mostrar el mismo alert y al cerrarlo oculta el texto Yo mismo.

No se si es ese tu objetivo ó no, pero independientemente de eso hace exactamente lo mismo en todos los navegadores (incluidos IE8 é IE7, IE9 con tecla F12)

Lo que sí tu html tiene bastantes errores, principalmente derivados de la falta de un doctype válido

Salu2
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 23/11/2012, 17:41
Avatar de Javier01  
Fecha de Ingreso: febrero-2008
Ubicación: Montevideo
Mensajes: 261
Antigüedad: 16 años, 9 meses
Puntos: 31
Respuesta: No funciona en IE, y si funciona en todos los demás...

de la manera que lo tienes publicado emprear no baja del 3er nivel utilizando IE9
O sea, que cuando hago clic en "Mi padre" aparece el alert(lni1dr1dp1) y enseguida otro alert(lni1dr1), por lo que se vuelve a cerrar el arbol hasta el nivel 2.

Ademas, tal vez este equivocado, pero no creo que sea correcto llamar a la función con la forma
alternar(lni1) , como si lni1 fuera una variable (sin las comillas) y no un string.
otra cosa, creo que debería usar el estándar document.getElementById() y no el método global variable.id

Saludos!
__________________
Tomarse un tiempo para redactar correctamente la pregunta, utilizando los signos de puntuación adecuados, es ganar tiempo y calidad en la respuesta.
  #6 (permalink)  
Antiguo 23/11/2012, 20:42
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Respuesta: No funciona en IE, y si funciona en todos los demás...

No debería funcionar en ninguno. El problema es que están anidados, y el click "sube" por el árbol. Los eventos hacen eso.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
</head>

<body onclick="alert('BODY')">

<dl onclick="alert('Principio de lista')">
   <dd onclick="alert('A')">A
   <dl>
      <dd onclick="alert('B')">B
      <dl>
         <dd onclick="alert('C')">C
         </dd>
      </dl>
      </dd>
   </dl>
   </dd>
</dl>

</body>
</html>
Hagan un click en cualquiera de las letras y van a ver cómo el evento sube "clickeando" hasta llegar al <body>. Por eso las funciones se disparan varias veces.




¿Esto no sirve? Por supuesto, hay que trabajarlo.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
</head>

<body>

<dl><dd onclick="alert('1')">Nivel "1."
    </dd>
    <dd>
    <dl><dd onclick="alert('2')">Nivel "2."
        </dd>
        <dd>
        <dl><dd onclick="alert('3')">Nivel "3."
            </dd>
            <dd>
            <dl><dd onclick="alert('4a')">Nivel "4a."
                </dd>
                <dd onclick="alert('4b')">Nivel "4b."
                </dd>
            </dl>
            </dd>
        </dl>
        </dd>
    </dl>
    </dd>
</dl>

</body>
</html>
Link al fondo

Problema con onclick y div anidados

Problemas con onMouseOut
  #7 (permalink)  
Antiguo 24/11/2012, 02:18
 
Fecha de Ingreso: julio-2007
Mensajes: 16
Antigüedad: 17 años, 4 meses
Puntos: 2
Respuesta: No funciona en IE, y si funciona en todos los demás...

Gracias a todos por contestar!
Varias de las cosas que se comentan ya las probé infructuosamente, como lo de llamar a la función con comillas o sin ellas, o usar el id del elemento que lanza la función (con this) y luego convertirlo en string y añadirle la 'l' por delante (el elemento que lanza la función tiene una id y la id del elemento que queremos manipular tiene el mismo id precedido de una l. Nada de esto ha funcionado en ÍE y si en los demás ...

Ya intuía q el tema del anidado podía tener q ver....pero no se tanto como para saber que...

Probare lo que me dicen y les digo

(lo del DOCTYPE: el código que pegué está entresacado de uno más amplio: como entenderán no hago esto para organizar mi árbol genealógico familiar . Es un trozo de un código que lista un directorio de personal de una empresa organizado en Nivel->Dirección->Departamento->Sección->Empleado. A>l hacer click en 'Dirección' se abren los distintos Departamentos, luego las Secciones de el Dpto en el que haga click...etc

Como digo, lo de los anidados funciona en el resto de exploradores y no en el IE. Para poder trabajar ese 'fallo' (aunque a lo mejor como decís el fallo es de los otros navegadores), entresaqué este trozo del html generado por la página (está en asp) y crear una nueva para hacer estas pruebas: en el original está el DOCTYPE correcto... )

Gracias!!!

Última edición por Canal_on; 24/11/2012 a las 03:36
  #8 (permalink)  
Antiguo 24/11/2012, 13:53
Avatar de Javier01  
Fecha de Ingreso: febrero-2008
Ubicación: Montevideo
Mensajes: 261
Antigüedad: 16 años, 9 meses
Puntos: 31
Respuesta: No funciona en IE, y si funciona en todos los demás...

No sabia que los eventos afectaban a los padres cuando los tagas estaban anidados!
Tal vez funcionaba en algunos si y en otros no porque el código html y los tags ul y li, desde el comienzo están mal anidados .
__________________
Tomarse un tiempo para redactar correctamente la pregunta, utilizando los signos de puntuación adecuados, es ganar tiempo y calidad en la respuesta.
  #9 (permalink)  
Antiguo 24/11/2012, 15:20
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Respuesta: No funciona en IE, y si funciona en todos los demás...

Cita:
Iniciado por Javier01 Ver Mensaje
Tal vez funcionaba en algunos si y en otros no porque el código html y los tags ul y li, desde el comienzo están mal anidados .
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.
  #10 (permalink)  
Antiguo 25/11/2012, 06:04
 
Fecha de Ingreso: julio-2007
Mensajes: 16
Antigüedad: 17 años, 4 meses
Puntos: 2
Mensaje Respuesta: No funciona en IE, y si funciona en todos los demás...

Cita:
Iniciado por Javier01 Ver Mensaje
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 Ver Mensaje
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 original
  1. window.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>&nbsp;&nbsp;
 
    <ul id='lni1dr1' style='display:none;'  >
        <li id='ni1dr1dp1'   onClick="alternar('lni1dr1dp1');"   style='display:block;' >Mi Padre</li> &nbsp;
            <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>
                   &nbsp; </ul>
            </ul>
			<li id='ni1dr1dp2'   onClick="alternar('lni1dr1dp2');"   style='display:block;' >Mi Madre</li> &nbsp;
            <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>
                   &nbsp; </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

Última edición por Canal_on; 25/11/2012 a las 06:16

Etiquetas: cancelbubble, eventos, ie8, ie9, propagacion
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

SíEste tema le ha gustado a 1 personas




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