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

Создание приложения для рисования с использованием HTML5 и Canvas.

Я думаю, что хочу иметь подобную систему для приложений, таких как Paint и Photoshop, где вы можете выбрать первичный и вторичный цвет и использовать левый клик, чтобы рисовать основным цветом и щелкнуть правой кнопкой мыши, чтобы нарисовать дополнительный цвет.

Однако после того, как вы отпустите правую кнопку мыши, вы увидите контекстное меню в браузере (просмотрите изображение, сохраните изображение, выберите все).

Может ли это быть элегантно отключено? Я не хочу, чтобы это было хакерское решение, которое работает только на некоторых браузерах, если это возможно.

Спасибо.

Ответы

Ответ 1

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

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

См. рабочий рабочий пример!

С последним jQuery:

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

Примечание:. Если возможно, вы должны использовать что-то более узкое, чем body!

EDITED

Обновлен Пример скрипта, чтобы показать, что контекстное меню ограничено холстом, а не изображением.

JQuery

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

HTML-ПРИМЕР

<canvas id="myCanvas" width="200" height="100">
  Your browser does not support the canvas element.
</canvas>

<img src="http://db.tt/oM60W6cH" alt="bubu">

Ответ 2

Попробуйте это

canvas.oncontextmenu = function (e) {
    e.preventDefault();
};

Ответ 3

Попробуйте добавить oncontextmenu="return false;" в тег body. Он должен отключить контекстное меню.

Если я верю этому источнику: http://javascript.about.com/library/blnoright.htm, который является первым результатом Google для запроса "javascript disable right click", который вы должны были попробовать.

Изменить:

  • о холсте. Я не знаю этого элемента, но вы попробовали позвонить stopPropagation() в элементе события после завершения вашей функции?
  • или предыдущее решение на теге canvas вместо тела...

Ответ 4

Это отключит контекстное меню на холсте.

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