Discussion :

[denisduval75]

Bonjour,

Dans une appli web, je souhaite désactiver le menu contextuel (clic droit) du navigateur depuis une page XHTML.
Existe-t-il une solution en JS ?

Merci.

[Watilin]

Bonjour,
je vais te donner une façon de faire ce que tu veux faire, mais après je vais t’expliquer pourquoi je pense que c’est une mauvaise idée.

Si tu veux empêcher le contextmenu sur le document entier, il faut annuler le comportement par défaut de l’évènement correspondant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.addEventListener("contextmenu", function (event) {
  event.preventDefault();
});

Si tu veux juste annuler le menu sur un élément particulier, il te faut d’abord une référence sur l’élément, par exemple avec getElementById ou querySelector, puis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var monElement = ... ;
 
monElement.addEventListener("contextmenu", function (event) {
  event.preventDefault();
});

Je pense que c’est une mauvaise idée, parce que tu ne devrais pas chercher à empêcher l’utilisatrice ou l’utilisateur de faire quelque chose que son navigateur lui permet de faire en temps normal.

Les navigateurs te permettent d’annuler le menu contextuel non pas pour le simple plaisir de l’annuler, mais pour le remplacer par quelque chose de plus utile, spécifiquement à l’application. Par exemple, le menu contextuel de Youtube te permet de copier l’adresse d’une vidéo, de voir des statistiques, etc.

---

Personnellement, j’ai ajouté une extension (que j’ai codée moi-même) à mon navigateur, et qui empêche les sites de faire ce que tu fais, sur la base sur d’une liste blanche. Quand un site que je visite n’est pas dans ma liste blanche, mon extension exécute ce script avant tout autre script de la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
let _addEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function addEventListener(eventType, ...args) {
  if ("contextmenu" !== eventType) {
    _addEventListener.call(this, eventType, ...args);
  }
};

Ce que fait ce bout de code, en gros, c’est détourner la méthode addEventListener pour la remplacer par une autre, qui fait presque exactement la même chose sauf dans le cas où l’évènement est contextmenu, auquel cas elle ne fait rien. Par conséquent, les écouteurs d’évènements contextmenu ne sont jamais ajoutés, et donc le menu contextuel ne peut pas être annulé.

Si je te montre ça c’est pour que tu aies bien conscience que chacun est maître de ce qui se passe sur sa machine, et que toi, en tant que développeur, tu ne peux pas avoir le contrôle absolu de ce qui se passe côté client. Si ton but est de protéger des créations artistiques, la meilleure solution est de ne publier que des versions en qualité limitée.

Note : en France, les créations sont automatiquement protégées par le droit d’auteur. À moins que tu mettes une licence qui l’autorise explicitement, personne n’a le droit d’utiliser ton travail.

[denisduval75]

Bonjour,
Merci beaucoup pour toutes ces explications et solutions.
En fait je souhaite simplement remplacer le menu contextuel du navigateur par un menu applicatif.
Merci.