webentwicklung-frage-antwort-db.com.de

Rechtsklick-Kontextmenü auf einem HTML-Canvas deaktivieren?

Erstellen einer Mal-App mit HTML5 und Canvas.

Ich denke, ich möchte ein ähnliches System wie Paint und Photoshop haben, bei dem Sie eine Primär- und Sekundärfarbe auswählen und mit der linken Maustaste auf Paint mit der Primärfarbe und mit der rechten Maustaste auf Paint mit der Sekundärfarbe klicken können.

Nach dem Loslassen der rechten Maustaste wird jedoch das Kontextmenü im Browser angezeigt (Bild anzeigen, Bild speichern, Alles auswählen).

Kann dies elegant deaktiviert werden? Ich möchte nicht, dass es sich um eine hackhafte Lösung handelt, die nach Möglichkeit nur mit einigen Browsern funktioniert.

Vielen Dank.

javascriptjqueryhtmlhtml5canvas
33
Ryan Peschel

Sie können dies verwenden:

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

Siehe dieses Arbeitsbeispiel !

Mit der neuesten jQuery:

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

Hinweis: Sie sollten möglichst etwas schmaleres als body verwenden!

BEARBEITET

Fiddle - Beispiel wurde aktualisiert, damit das Kontextmenü auf die Leinwand und nicht auf das Bild beschränkt ist.

JQUERY

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

HTML BEISPIEL

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

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

Versuche dies

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

Versuchen Sie, oncontextmenu="return false;" am body-Tag hinzuzufügen. Es sollte das Kontextmenü deaktivieren.

Wenn ich diese Quelle glaube: http://javascript.about.com/library/blnoright.htm - Welches ist das erste Ergebnis von Google für die Abfrage "Javascript deaktivieren Rechtsklick", die Sie versucht haben sollten.

Bearbeiten: 

  • über canvas Ich kenne das Element nicht, aber haben Sie versucht, stopPropagation() für das Ereigniselement aufzurufen, wenn Ihre Funktion endet? 
  • oder die vorherige Lösung auf dem Canvas-Tag anstelle des Körpers ...
7
Vinze

Dadurch wird das Kontextmenü auf der Leinwand deaktiviert. 

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

Dies sollte die Aufgabe mit einer moderneren (und lesbaren) Syntax erfüllen als die anderen Antworten.

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

Um die Abhängigkeit von Jquery Js zu vermeiden, habe ich versucht, das Ereignis hazardDefault nicht nur mit der Leinwand, sondern auch in anderen Elementen zu versuchen. In Bezug auf den crossBrowser habe ich diese Seite überprüft: Ereignisse - Kontextmenü .

Möglicherweise benötigen Sie eine Überprüfung der Elemente, die undefined zurückgeben. Dies dient jedoch als Demonstration.

(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') _Elm = 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/>

0
HarleySG