web-dev-qa-db-fra.com

Désactivation du menu contextuel par clic droit sur un canevas HTML?

Création d'une application de peinture à l'aide de HTML5 et de Canvas.

Je pense que je souhaite disposer d’un système similaire à celui d’applications telles que Paint et Photoshop, dans lequel vous pouvez sélectionner une couleur primaire et secondaire et utiliser un clic gauche pour peindre avec la couleur primaire et un clic droit pour peindre avec la couleur secondaire.

Cependant, après avoir relâché le bouton droit de la souris, le menu contextuel du navigateur est affiché (afficher l'image, enregistrer l'image, sélectionner tout).

Cela peut-il être désactivé avec élégance? Je ne veux pas que ce soit une solution bidon qui ne fonctionne que sur certains navigateurs, si possible.

Merci.

javascriptjqueryhtmlhtml5canvas
33
Ryan Peschel

Vous pouvez utiliser ceci:

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

Voir ceci exemple de travail !

Avec le dernier jQuery:

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

Note: Vous devriez utiliser quelque chose de plus étroit que body si possible!

ÉDITÉ

Mise à jour du Fiddle Exemple } pour afficher le menu contextuel limité au canevas et non à l'image.

JQUERY

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

EXEMPLE 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">
37
Zuul

Essaye ça

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

Essayez d'ajouter oncontextmenu="return false;" sur la balise body. Cela devrait désactiver le menu contextuel.

Si je crois que cette source: http://javascript.about.com/library/blnoright.htm est le premier résultat de Google à la requête "javascript disable right click" que vous auriez dû essayer.

Modifier : 

  • à propos de canvas Je ne connais pas l'élément, mais avez-vous essayé d'appeler stopPropagation() sur l'élément event une fois votre fonction terminée? 
  • ou la solution précédente sur la balise canvas au lieu du corps ...
7
Vinze

Cela désactivera le menu contextuel sur la toile. 

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

Cela devrait faire l'affaire avec une syntaxe plus moderne (et lisible) que les autres réponses.

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

En évitant de dépendre de Jquery Js, j'ai essayé l'événement preventDefault non seulement avec canvas, mais aussi avec d'autres éléments. En ce qui concerne crossBrowser, j’ai passé en revue cette page: Événements - Menu contextuel .

Vous avez probablement besoin d'une validation des éléments renvoyant des éléments non définis, mais cela sert de démonstration.

(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