Estoy usando lienzo con html para dibujar en la pantalla. Lo que necesito es dibujar solo con el clic izquierdo, y el clic derecho simplemente no hace nada. Intenté lo siguiente:

canvas.oncontextmenu = e => {
    e.preventDefault();
    e.stopPropagation();
}

Inhabilitó el menú de clic derecho, pero puedo presionar el lienzo (y eventualmente dibujar sobre él) con el clic izquierdo y derecho. ¿Qué me estoy perdiendo?

3
user12267069 24 oct. 2019 a las 10:44

5 respuestas

La mejor respuesta

Tratar:

<canvas oncontextmenu="return false;"></canvas>
2
TheCondorIV 24 oct. 2019 a las 07:45

Prueba esto:

canvas.addEventListener('mousedown', (event) => {
  if (event.which !== 1) {
    event.preventDefault();
  }
});

También debería deshabilitar la aparición del menú contextual. Hacer clic en el botón central del mouse no tendrá ningún efecto también.

event.which contiene el índice del botón del mouse que se presiona. 1 es el botón izquierdo, 2 es el medio, 3 es el derecho. preventDefault() evita que se ejecute el comportamiento predeterminado del navegador (como abrir el menú contextual, etc., se puede aplicar en muchas situaciones).

Por cierto, stopPropagation() se usa para evitar que tales eventos (como la apertura del menú contextual, en este caso) se ejecuten en elementos secundarios . <canvas> no tiene etiquetas secundarias, por lo que puede omitirse.

0
Andrey Kostenko 24 oct. 2019 a las 07:57

Uso de Jquery:

$('body').on('contextmenu', '#myCanvas', function(e){ return false; });
1
TheCondorIV 26 oct. 2019 a las 05:03

Pruebe lo siguiente:

const canvas = document.getElementById('myCanvas');
canvas.oncontextmenu = () => false;

Donde myCanvas es eventualmente la ID dada al lienzo, es decir

<canvas id="myCanvas"></canvas>
0
user12267439user12267439 24 oct. 2019 a las 07:56

Puede utilizar esto:

canvas.bind('contextmenu', function(e){
    return false;
}); 
2
user12267581user12267581 24 oct. 2019 a las 08:23