web-dev-qa-db-fra.com

Empêcher le menu contextuel d'ouvrir avec un clic droit sur un élément

Je souhaite que mon site Web ait une interaction personnalisée lorsque l'utilisateur clique avec le bouton droit sur un élément, <div class="myElement"></div>. Ainsi, je ne veux pas que le menu contextuel apparaisse également lorsque l'élément est cliqué avec le bouton droit pour ne pas gâcher l'UX. Y a-t-il un moyen de faire cela (de préférence en CSS, mais Vanilla js fonctionne aussi)?

Voulu:

.myElement {
    contextMenuOnRightClick: none,
}
javascripthtmlcss
7
agreis1

Le moyen le plus simple est d'utiliser du JavaScript très simple:

<div class="myElement" oncontextmenu="return false;"></div>
  • oncontextmenu: l'événement se déclenche lorsque le menu contextuel (menu contextuel) est affiché.
  • return false;: annule l'événement; ce qui arrête l'affichage du menu.

Mieux encore, au lieu d’utiliser inline JS, créez un nom de classe réutilisable .js-noMenu et ajoutez-le à tout élément susceptible d’empêcher les clics droits.
Placez les lignes JS dans votre fichier Javascript.

[...document.querySelectorAll(".js-noMenu")].forEach( el => 
 el.addEventListener('contextmenu', e => e.preventDefault())
);
<div class="js-noMenu">Right click me!</div>
<p>You <b>can</b> contextmenu me!</p>
<p class="js-noMenu">You cannot here</p>

fondamentalement Event.preventDefault() empêche le navigateur de déclencher des actions par défaut

7
Toastrackenigma

Quelques points doivent être soulignés:

  • Event.preventDefault () fonctionne, mais peut générer des sons d'erreur/de restriction sur certains navigateurs (par exemple, Chrome) et, dans la mesure où vous envisagez d'implémenter une action personnalisée, il se peut que cette solution ne soit pas la meilleure.

  • Vous allez écrire beaucoup de Vanilla JS pur pour le faire fonctionner sur tous les navigateurs, car l'implémentation du sélecteur inter-navigateurs seul nécessitera beaucoup de code sans une bibliothèque comme jQuery.

  • Ajouter plus de 50 000 bibliothèques jQuery pour quelque chose comme cela est absurde (à moins que vous n'ayez besoin de la bibliothèque pour autre chose).

  • Vous pouvez toujours y insérer une valeur identique à celle de l'équivalent JS et donner à votre code une belle apparence.

  • Prendre en charge des éléments ajoutés dynamiquement à la page avec JS représente un travail considérable.

Utilisez quelque chose comme ceci:

<div class="myElement" oncontextmenu="return!1"></div>
0
Richard McFriend Oluwamuyiwa