禁用右键单击 canvas

Question

我正在使用 canvas 和 html 在屏幕上绘图。 我需要的是仅用左键单击绘制，而右键单击什么也不做。 我尝试了以下方法：

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

它禁用了右键菜单，但我可以通过左键和右键单击 canvas（并最终在其上绘制）。 我错过了什么？

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最终是给 canvas 的 ID，即

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