Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/12/2013, 12:22
Avatar de sergi_multimedia
sergi_multimedia
 
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 13 años, 5 meses
Puntos: 4
Menu contextual con botón derecho del ratón

Hola a tod@s, ayer formulaba una pregunta que fue resuelta, pero os pongo el mismo código porque es sobre el mismo ejercicio.

Cuando hago clic en alguno de los dos enlaces me sale un menú contextual que he creado con el evento "click". Pero yo quiero que ese menú contextual me salga al hacerlo con el botón derecho del ratón, y no con el izquierdo.

Alguna sugerencia o enlace donde explique como hacerlo? Porqué eventos de rightbutton no he visto . (No puedo usar jQuery, tengo que hacerlo con puro Javascript).

Gracias de antemano ;)

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);