Foros del Web » Programando para Internet » Javascript »

Menu contextual con botón derecho del ratón

Estas en el tema de Menu contextual con botón derecho del ratón en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/12/2013, 12:22
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 13 años, 4 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);
  #2 (permalink)  
Antiguo 07/12/2013, 14:06
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: Menu contextual con botón derecho del ratón

Le pasas un parámetro llamado "event" a esa función y añades esto dentro:

Código Javascript:
Ver original
  1. if(event.button==2){
  2. // hacer algo
  3. }else{
  4. event.preventDefault();
  5. }

Espero haberte ayudado
  #3 (permalink)  
Antiguo 08/12/2013, 05:37
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 13 años, 4 meses
Puntos: 4
Respuesta: Menu contextual con botón derecho del ratón

Cita:
Iniciado por PHPeros Ver Mensaje
Le pasas un parámetro llamado "event" a esa función y añades esto dentro:

Código Javascript:
Ver original
  1. if(event.button==2){
  2. // hacer algo
  3. }else{
  4. event.preventDefault();
  5. }

Espero haberte ayudado
Hola, gracias por pasar. No me acabo de aclarar. Yo he puesto esto, pero sigue sin funcionar, ahora con esto al apretar clicl con el izquierdo no me sale el menú contextual, pero con el derecho me sale el menú contextual que viene por defecto en el navegador.

Código Javascript:
Ver original
  1. google.addEventListener("click", function(e){
  2. if(event.button == 2){
  3. var posx = event.clientX;
  4. var posy = event.clientY;
  5. menu.style.left = posx + "px";
  6. menu.style.top = posy + "px";
  7.            
  8. if(menu.style.display == "none"){
  9. menu.style.display = "block";
  10. }else{
  11. menu.style.display = "none";
  12. }
  13.                                    
  14. if (element == google){
  15. elementURL = googleURL;
  16. }else if(element == youtube){
  17. elementURL = youtubeURL;
  18. }
  19. {else{
  20. event.preventDefault();
  21. }
  22. }, false);
  #4 (permalink)  
Antiguo 08/12/2013, 07:00
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: Menu contextual con botón derecho del ratón

Código Javascript:
Ver original
  1. google.addEventListener("click", function(e){
  2. if(e.button == 2){
  3. var posx = event.clientX;
  4. var posy = event.clientY;
  5. menu.style.left = posx + "px";
  6. menu.style.top = posy + "px";
  7.            
  8. if(menu.style.display == "none"){
  9. menu.style.display = "block";
  10. }else{
  11. menu.style.display = "none";
  12. }
  13.                                    
  14. if (element == google){
  15. elementURL = googleURL;
  16. }else if(element == youtube){
  17. elementURL = youtubeURL;
  18. }
  19. }else{
  20. event.preventDefault();
  21. }
  22. }, false);
  #5 (permalink)  
Antiguo 08/12/2013, 07:04
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 13 años, 4 meses
Puntos: 4
Respuesta: Menu contextual con botón derecho del ratón

Hola PHPeros, pero creo que me has copiado el mismo código que puse yo, ¿no?
  #6 (permalink)  
Antiguo 08/12/2013, 07:12
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: Menu contextual con botón derecho del ratón

Cita:
Iniciado por sergi_multimedia Ver Mensaje
Hola PHPeros, pero creo que me has copiado el mismo código que puse yo, ¿no?
Sí, solo que ahora está bien
  #7 (permalink)  
Antiguo 08/12/2013, 09:24
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Menu contextual con botón derecho del ratón

bueno es algo mas complejo que eso

primero has de tener claro cuales son los valores de cada botón del ratón (izquierdo --> depsnde del navegador, derecho --> 2 y rueda --> depende del navegador) y los eventos que se activan al pulsar los botones del ratón. en este caso no puedes usar el evento onclick, has de usar el evento onmousedown para invocar a la función. por otro lado, al pulsar con el botón derecho, se activa el evento oncontextmenu. este evento hay que cancelarlo para que así no se muestre el menú contextual que traen los navegadores
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 08/12/2013 a las 14:15 Razón: + info
  #8 (permalink)  
Antiguo 08/12/2013, 16:42
 
Fecha de Ingreso: abril-2012
Mensajes: 20
Antigüedad: 11 años, 11 meses
Puntos: 0
Respuesta: Menu contextual con botón derecho del ratón

he escrito un post preguntando lo mismo , la diferencia es que yo estaba utilizando jquery (no con mucha fortuna ) el caso que esta es mi version de la historia,


Código HTML:
<body>
	<div id="menu" >
   	  <ul id="llista">
 	    <a href="#"><li>a</li></a>
            <a href="#"><li>b</li></a>
            <a href="#"><li>c</li></a>
        </ul>
    </div>
<div id="contextmenu">
    	<ul>
        	<li class="c1"">Delete node</li>
            <li class="c2">clone node</li>
            <li class="c3">go to</li>
        </ul>
    </div>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body> 

Código:
$(document).ready(function(){
	$("a").bind('contextmenu', function(event){
			$("#contextmenu").css({"top": event.pageY + "px", "left": event.pageX + "px"}).show();
			event.preventDefault();
													
		});
		$(document).bind('click',function(){			
				$('#contextmenu').hide();
					
			});
			
	});
para crear el menu contextual

Código:
 $(".c1").click(function(){ 
$("li").remove();
})
pero no se como quitar un nodo sin quitarlos todos con jquery

Etiquetas: contextual, derecho, jquery
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 00:56.