禁用画布上的右键单击功能

Question

我在使用HTML和Canvas在屏幕上绘图。我的要求是只能用左键进行绘制，右键不起任何作用。我尝试了以下方法：

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

它禁用了右键菜单，但我能够使用左右键点击画布（最终在其上绘制）。我错过了什么吗？

- user12267069

Answer 1

尝试：

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

- TheCondorIV

---

让我试试吧 :) - user12267069

Answer 2

您可以使用这个：

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

- user12267581

Answer 3

使用JQuery：

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

- user12276900

---

当你发布回复时，即使是正确的，也要加以解释。在你的情况下，有更多的答案，所以你应该暴露你回复的优缺点。 - David García Bodego

Answer 4

试试这个：

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

还应该禁用出现上下文菜单。点击中间鼠标按钮也不会产生任何效果。

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

顺便说一下，stopPropagation() 用于停止在子元素中执行此类事件（在本例中是上下文菜单打开）。<canvas>没有子标记，因此可以省略。

- Andrey Kostenko

Answer 5

请尝试以下操作：

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

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

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

- user12267439