禁用右键单击画布

Question

我正在使用带html的画布在屏幕上绘制。我需要做的就是只用左键单击绘制，而用右键单击则什么都不做。我尝试了以下方法：

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

它禁用了右键单击菜单，但是我可以用鼠标左键和右键单击来按下画布（并最终在其上绘制）。我想念什么？

Answer 1

尝试：

<canvas oncontextmenu="return false;"></canvas>

Answer 2

您可以使用此：

canvas.bind('contextmenu', function(e){
    return false;
}); 

Answer 3

使用Jquery：

$('body').on('contextmenu', '#myCanvas', function(e){ return false; });

Answer 4

尝试一下：

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

它也应该禁止上下文菜单出现。单击鼠标中键也不会产生任何效果。

event.which包含按下的鼠标按钮的索引。 1是左侧按钮，2是中间按钮，3是右边按钮。 preventDefault()阻止执行默认的浏览器行为（例如打开上下文菜单等，它可以在许多情况下应用）。

顺便说一下，stopPropagation()用于阻止在子元素上执行此类事件（在这种情况下，如上下文菜单打开）。 <canvas>没有子标签，因此可以省略。

Answer 5

请尝试以下操作：

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

其中 myCanvas 最终是赋予画布的ID，即

<canvas id="myCanvas"></canvas>