0

De la siguiente manera no me obtiene el clic derecho, sino que saca el menú de opciones que tienen los elementos canvas, ¿como podría eliminar ese menú y obtener el evento?

function dibujaForma(){
    // Toma el elemento canvas usando el DOM
    var canvas = document.getElementById('mycanvas');

    // Asegurate de no ejecutar el canvas en navegadores que no lo soporten
    if (canvas.getContext){
       // usa getContext para empezar al dibujar en el canvas
       var ctx = canvas.getContext('2d');

       // Dibuja Lineas
       for (i=0;i<10;i++){
         ctx.lineWidth = 1+i;
         ctx.beginPath();
         ctx.moveTo(5+i*14,5);
         ctx.lineTo(5+i*14,140);
         ctx.stroke();
      }
   } else {
         alert('Necesitas Safari o Firefox 1.5+ para ver esta demo.');
   }
   
   

        document.getElementById("mycanvas").onclick = function(evt){   
	          if (event.button==2){
              console.log('presiono clic derecho');
            }else{
              console.log('presiono clic izquierdo');
            }
        }
   
   
}
#test {
  width: 100px;
  height:100px;
  margin: 0px auto;
}
<body id="test" onload="dibujaForma();">
  <canvas id="mycanvas"></canvas>
</body>

1 respuesta 1

1

Utiliza el evento contextmenu registrandolo con addEventListener y cuando obtengas el evento, utiliza el metodo preventDefault() para que no aparezca el menu por defecto que aparece con el clic derecho:

function dibujaForma(){
    // Toma el elemento canvas usando el DOM
    var canvas = document.getElementById('mycanvas');

    // Asegurate de no ejecutar el canvas en navegadores que no lo soporten
    if (canvas.getContext){
       // usa getContext para empezar al dibujar en el canvas
       var ctx = canvas.getContext('2d');

       // Dibuja Lineas
       for (i=0;i<10;i++){
         ctx.lineWidth = 1+i;
         ctx.beginPath();
         ctx.moveTo(5+i*14,5);
         ctx.lineTo(5+i*14,140);
         ctx.stroke();
      }
   } else {
         alert('Necesitas Safari o Firefox 1.5+ para ver esta demo.');
   }
   
   

    document.getElementById("mycanvas").onclick = function(evt){   
        if (event.button==2){
          console.log('presiono clic derecho');
        }else{
          console.log('presiono clic izquierdo');
        }
    }
    
     document.getElementById("mycanvas").addEventListener('contextmenu', function(evt){   
           evt.preventDefault(); // remueve esta linea si quieres que aparezca el menu por defecto.
           console.log("preciono clic derecho");
        },false);
   
   
   
}
#test {
  width: 100px;
  height:100px;
  margin: 0px auto;
}
<body id="test" onload="dibujaForma();">
  <canvas id="mycanvas"></canvas>
</body>

3
  • gracias hermano, no lo conseguía por ningún lado.
    – bypabloc_
    Commented el 1 sept. 2017 a las 19:34
  • Siempre. Recuerda marcarla si esta es la respuesta que esperabas.
    – Einer
    Commented el 1 sept. 2017 a las 19:41
  • Creí q ya le había dado, disculpa.
    – bypabloc_
    Commented el 1 sept. 2017 a las 20:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.