Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/01/2009, 14:19
mariano_donati
 
Fecha de Ingreso: marzo-2005
Mensajes: 1.418
Antigüedad: 19 años, 10 meses
Puntos: 9
Agregar manejador de eventos con parámetros

Buenas. Estoy haciendo un menú. A la izquierda se muestran una serie de opciones y a la derecha, hay un panel que se va actualizando de acuerdo a la opción seleccionada. Cada opción del menu (son capas que se van anidando una debajo de la otra) tienen un ID con formato OPTION_INDICE . Guardo cada una de estas capas en un array y cada uno de los paneles que voy a mostrar en otro.
En Firefox este código funciona correctamente:

Código javascript:
Ver original
  1. var OPTION_SESSION             = 0;
  2. var OPTION_PRIVACY            = 1;
  3. var OPTION_VISUAL            = 2;
  4. var OPTION_USER_DATA        = 3;
  5. var OPTION_PERSONAL_DATA     = 4;
  6.  
  7. var current_option    = null;
  8. var menu_options    = new Array();
  9. var panels            = new Array();
  10.  
  11. function initialize()
  12. {    
  13.  
  14.     menu_options[OPTION_SESSION] = document.getElementById('OPTION_0');
  15.     menu_options[OPTION_PRIVACY] = document.getElementById('OPTION_1');
  16.     menu_options[OPTION_VISUAL] = document.getElementById('OPTION_2');
  17.     menu_options[OPTION_USER_DATA] = document.getElementById('OPTION_3');
  18.     menu_options[OPTION_PERSONAL_DATA] = document.getElementById('OPTION_4');
  19.  
  20.     panels[OPTION_SESSION] = document.getElementById('PANEL_0');
  21.     panels[OPTION_PRIVACY] = document.getElementById('PANEL_1');
  22.     panels[OPTION_VISUAL] = document.getElementById('PANEL_2');
  23.     panels[OPTION_USER_DATA] = document.getElementById('PANEL_3');
  24.     panels[OPTION_PERSONAL_DATA] = document.getElementById('PANEL_4');
  25.    
  26.     attach_menu_option_event(OPTION_SESSION, 'click', show_panel);
  27.     attach_menu_option_event(OPTION_PRIVACY, 'click', show_panel);
  28.    
  29.     show(OPTION_SESSION);
  30.     current_option = OPTION_SESSION;
  31.    
  32. }
  33.  
  34. function show_panel()
  35. {    
  36.     [B]var option = parseInt(this.id.charAt(7))[/B];
  37.     if(current_option != null)
  38.         hide(current_option);
  39.     current_option = option;
  40.     show(option);    
  41. }
  42.  
  43. function show(panel)
  44. {
  45.     panels[panel].style.display = 'block';
  46. }
  47.  
  48. function hide(panel)
  49. {
  50.     panels[panel].style.display = 'none';
  51. }
  52.  
  53. function attach_menu_option_event(option, evnt, callback)
  54. {
  55.         var element    = menu_options[option];
  56.         if (element.addEventListener)      
  57.             element.addEventListener(evnt,callback,false);
  58.         else if (element.attachEvent)  
  59.             element.attachEvent("on"+evnt, callback);
  60. }

La línea que está en negrita es donde me falla en Internet Explorer. Esto es porque en Firefox cuando se dispara un evento, en la función que maneja este evento la palabra reservada this apunta hacia el objeto que disparo el mismo, en cambio en IE apunta al objeto window. Por lo tanto, aquí veo dos alternativas para hacer que esto funcione en ambos navegadores:
- Cuando se dispara el evento, en Internet Explorer, de alguna forma obtener una referencia a la capa que disparo el mismo.
- Pasarle un argumento, que en este caso sería el índice que ocupa la opción correspondiente cuando creo el manejador de eventos para cada opción del menú

¿Alguna idea de cómo hacerlo?.
Saludos.
__________________
Add, never Remove