Menu contextual con botón derecho del ratón

[sergi_multimedia]

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:

<ul>
 <li id="web-google">Google</li>
 <li id="web-youtube">YouTube</li>
</ul>
 
<div id="menu-contextual" style="display:none;position:absolute">
 <ul>
  <li id="desaparecer">Eliminar</li>
  <li id="copiar" onclick="">Clonar</li>
  <li id="abrir">Abrir</li>
 </ul>
</div>
 

Código Javascript:

var google = document.getElementById("web-google");
var youtube = document.getElementById("web-youtube");
var menu = document.getElementById("menu-contextual");
var eliminarNode = document.getElementById("desaparecer");
var clonarNode = document.getElementById("copiar");
var abrirNode = document.getElementById("abrir");
            
// Open context menu //
function openMenu(event) {
 var posx = event.clientX;
 var posy = event.clientY;
 menu.style.left = posx + "px";
 menu.style.top = posy + "px";
                
 if(menu.style.display == "none"){
  menu.style.display = "block"; 
 }else{
  menu.style.display = "none";
  }    
 }
            
// Clonar Node //
function clonar(element){
 var clone = element.cloneNode(true);
 var newClone = document.getElementsByTagName('ul')[0];
 newClone.appendChild(clone);
}
            
// Events //
google.addEventListener("click", openMenu, false);
youtube.addEventListener("click", openMenu, false);
 

[PHPeros]

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

Código Javascript:

if(event.button==2){
// hacer algo
}else{
event.preventDefault();
}
 

Espero haberte ayudado

[sergi_multimedia]

Iniciado por PHPeros

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

Código Javascript:

if(event.button==2){
// hacer algo
}else{
event.preventDefault();
}
 

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:

google.addEventListener("click", function(e){
if(event.button == 2){
var posx = event.clientX;
var posy = event.clientY;
menu.style.left = posx + "px";
menu.style.top = posy + "px";
            
if(menu.style.display == "none"){
menu.style.display = "block"; 
}else{
menu.style.display = "none";
}
                                    
if (element == google){
elementURL = googleURL;
}else if(element == youtube){
elementURL = youtubeURL;
}
{else{
event.preventDefault();
}
}, false);
 

[PHPeros]

Código Javascript:

google.addEventListener("click", function(e){
if(e.button == 2){
var posx = event.clientX;
var posy = event.clientY;
menu.style.left = posx + "px";
menu.style.top = posy + "px";
            
if(menu.style.display == "none"){
menu.style.display = "block"; 
}else{
menu.style.display = "none";
}
                                    
if (element == google){
elementURL = googleURL;
}else if(element == youtube){
elementURL = youtubeURL;
}
}else{
event.preventDefault();
}
}, false);
 

[sergi_multimedia]

Hola PHPeros, pero creo que me has copiado el mismo código que puse yo, ¿no?

[PHPeros]

Iniciado por sergi_multimedia

Hola PHPeros, pero creo que me has copiado el mismo código que puse yo, ¿no?

Sí, solo que ahora está bien

[IsaBelM]

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

[shezard]

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