Вопрос по html5, html, javascript, canvas, jquery – Отключить контекстное меню правой кнопкой мыши на HTML-холсте?

33

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

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

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

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

Благодарю.

Ваш Ответ

6   ответов
37

You can use this:

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

Видеть эторабочий пример!

With the lastest jQuery:

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

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


EDITED

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

JQUERY

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

HTML EXAMPLE

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

<img src="http://db.tt/oM60W6cH" alt="bubu">
Error: User Rate Limit Exceeded Ryan Peschel
Error: User Rate Limit Exceededcontextmenu доступно для изображения нижеcanvas.
15

Попробуй это

canvas.oncontextmenu = function (e) {
    e.preventDefault();
};
Error: User Rate Limit Exceeded
7

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

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

Редактировать :

  • about canvas I don't know the element, but did you try calling stopPropagation() on the event element once your function ends ?
  • or the previous solution on the canvas tag instead of the body...
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Ryan Peschel
2

Это должно делать работу с более современным (и читаемым) синтаксисом, чем другие ответы.

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

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

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

Избегая зависимости от Jquery Js, я пробовал событие warnDefault не только с canvas, но и с другими элементами. Что касается кроссбраузера, я просмотрел эту страницу:События - Contextmenu.

Возможно, вам нужна проверка элементов, которые возвращают неопределенное значение, но это служит демонстрацией.

(function(w, d){
	d.body.addEventListener('contextmenu', function(event){
		var blockContext = [
			{ type: 'tag', value: 'canvas'},
			{ type: 'id',  value: 'fooId'},
			{ type: 'tag',  value: 'img'},
		];
		blockContext.map(
			elm => {
				var _elm
				
				if(elm.type == 'tag') _el,m = d.querySelector(elm.value);
				if(elm.type == 'id') _elm = d.getElementById(elm.value);

				if(event.target == _elm) event.preventDefault();
			}
		);
	});
})(window, document);
canvas {
background-color: grey;
}
<canvas></canvas>
<img src="https://via.placeholder.com/200x200"/>
<p id="fooId">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lorem luctus nisi fermentum imperdiet in ac tortor. Vestibulum interdum risus vitae metus finibus pretium. Nullam facilisis lacus nec pellentesque faucibus. In tempus lorem ut mi sodales, vitae scelerisque quam pretium. Duis venenatis enim in nunc laoreet venenatis. Aliquam at magna vitae purus tincidunt posuere. Donec dictum pharetra ipsum, eu auctor lorem aliquet vitae. Donec faucibus metus quis laoreet ultricies. Aliquam aliquet, lectus a tempor tristique, diam sem auctor felis, sed ultrices magna nunc ut sem. Curabitur congue diam lacinia risus sodales luctus. In nec maximus ex. Nulla ultrices diam a erat imperdiet, nec convallis nisl pulvinar. Etiam quis placerat arcu, eu elementum felis. Phasellus lectus massa, faucibus faucibus nibh ut, dignissim tempor neque.
<p/>

Похожие вопросы