Отключить щелчок правой кнопкой мыши на холсте

Question

Я использую холст с HTML для рисования на экране. Мне нужно рисовать только левой кнопкой, а правой - ничего не делать. Я попробовал следующее:

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

Это отключило меню правой кнопки мыши, но я могу нажать на холст (и в конечном итоге нарисовать на нем) как левой, так и правой кнопкой мыши. Чего мне не хватает?

Answer 1

Вы можете использовать это:

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

Answer 2

попробуй:

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

Answer 3

Попробуйте выполнить следующее:

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

, где myCanvas в конечном итоге - идентификатор, данный холсту, т. Е.

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

Answer 4

Использование Jquery:

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

Answer 5

Попробуйте:

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

Также следует отключить отображение контекстного меню. Нажатие средней кнопки мыши тоже не даст никакого эффекта.

event.which содержит индекс нажатой кнопки мыши. 1 - левая кнопка, 2 - средняя, ​​3 - правая. preventDefault() предотвращает выполнение поведения браузера по умолчанию (например, открытие контекстного меню и т. Д., Его можно применять во многих ситуациях).

Кстати, stopPropagation() используется для остановки таких событий (как контекстное меню). открытие, в данном случае) от выполнения на дочерних элементах . <canvas> не имеет дочерних тегов, поэтому его можно опустить.