Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Obtener el ID del elemento donde se lanzó el evento

Estas en el tema de Obtener el ID del elemento donde se lanzó el evento en el foro de Javascript en Foros del Web. Hola a tod@s, tengo una lista de dos elementos, al clicar en alguna de los dos se me abre un menú contextual con 3 opciones: ...
  #1 (permalink)  
Antiguo 06/12/2013, 11:57
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 14 años
Puntos: 4
Pregunta Obtener el ID del elemento donde se lanzó el evento

Hola a tod@s, tengo una lista de dos elementos, al clicar en alguna de los dos se me abre un menú contextual con 3 opciones: Eliminar, Clonar, Abrir.

Yo lo que quiero es que una vez abierto el menú contextual y yo aprete clonar entonces ver en la pantalla la clonación del nodo. Como clonar el nodo ya sé hacerlo, lo que me estoy peleando es saber en que id se ha realizado el clic, si en google o en youtube, para así saber que parámetro meterle a la función que clona el nodo.

Sé que tengo que hacer algo con el target.id, pero no me acabo de aclarar, no sé como implementarlo.

Código HTML:
Ver original
  1. <ul>
  2.  <li id="web-google">Google</li>
  3.  <li id="web-youtube">YouTube</li>
  4. </ul>
  5.  
  6. <div id="menu-contextual" style="display:none;position:absolute">
  7.  <ul>
  8.   <li id="desaparecer">Eliminar</li>
  9.   <li id="copiar" onclick="">Clonar</li>
  10.   <li id="abrir">Abrir</li>
  11.  </ul>
  12. </div>

Código Javascript:
Ver original
  1. var google = document.getElementById("web-google");
  2. var youtube = document.getElementById("web-youtube");
  3. var menu = document.getElementById("menu-contextual");
  4. var eliminarNode = document.getElementById("desaparecer");
  5. var clonarNode = document.getElementById("copiar");
  6. var abrirNode = document.getElementById("abrir");
  7.            
  8. // Open context menu //
  9. function openMenu(event) {
  10.  var posx = event.clientX;
  11.  var posy = event.clientY;
  12.  menu.style.left = posx + "px";
  13.  menu.style.top = posy + "px";
  14.                
  15.  if(menu.style.display == "none"){
  16.   menu.style.display = "block";
  17.  }else{
  18.   menu.style.display = "none";
  19.   }    
  20.  }
  21.            
  22. // Clonar Node //
  23. function clonar(element){
  24.  var clone = element.cloneNode(true);
  25.  var newClone = document.getElementsByTagName('ul')[0];
  26.  newClone.appendChild(clone);
  27. }
  28.            
  29. // Events //
  30. google.addEventListener("click", openMenu, false);
  31. youtube.addEventListener("click", openMenu, false);

Saludos y gracias de antemano.
  #2 (permalink)  
Antiguo 06/12/2013, 15:08
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 11 meses
Puntos: 206
Respuesta: Obtener el ID del elemento donde se lanzó el evento

Tal y como usas el addEventListener, en la función openMenu la variable THIS siempre apuntará al nodo que ha disparado el evento click.

http://jsfiddle.net/marlanga/5yX48/

Aquí puse un link ahcerca del uso de THIS en javascript:
http://www.forosdelweb.com/f13/duda-...e-uso-1084120/
  #3 (permalink)  
Antiguo 07/12/2013, 11:58
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 14 años
Puntos: 4
Respuesta: Obtener el ID del elemento donde se lanzó el evento

Cita:
Iniciado por marlanga Ver Mensaje
Tal y como usas el addEventListener, en la función openMenu la variable THIS siempre apuntará al nodo que ha disparado el evento click.

http://jsfiddle.net/marlanga/5yX48/

Aquí puse un link ahcerca del uso de THIS en javascript:
http://www.forosdelweb.com/f13/duda-...e-uso-1084120/
Muchas gracias marlanga, me ha quedado mucho más claro como trabaja this.

Problema solucionado :)

Etiquetas: target
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 22:19.