Maison > interface Web > tutoriel CSS > Comment lier un événement à un clic droit de la souris et supprimer le menu contextuel du navigateur ?

Comment lier un événement à un clic droit de la souris et supprimer le menu contextuel du navigateur ?

Patricia Arquette
Libérer: 2024-12-02 14:40:14
original
956 Les gens l'ont consulté

How to Bind an Event to a Right Mouse Click and Suppress the Browser's Context Menu?

Lier l'événement au clic droit de la souris sans activer le menu contextuel du navigateur

Question :

Comment exécuter une action spécifique lorsque clic droit, tout en empêchant le menu contextuel du navigateur par défaut de apparaissant ?

Réponse :

Solution 1 : Utilisation du gestionnaire d'événements oncontextmenu

jQuery ne fournit pas de menu oncontextmenu intégré gestionnaire d'événements. Au lieu de cela, vous pouvez utiliser l'approche suivante :

$(document).ready(function() {
  document.oncontextmenu = function() { return false; };
});
Copier après la connexion

Cela désactive le menu contextuel du navigateur en annulant l'événement oncontextmenu dans l'élément DOM.

Solution 2 : Utilisation de l'événement jQuery mousedown Gestionnaire

Vous pouvez capturer l'événement mousedown à l'aide de jQuery et déterminer quel bouton était pressé :

$(document).ready(function() {
  $(document).mousedown(function(e) {
    if (e.button == 2) {
      // Right mouse button clicked
      alert('Right mouse button!');
      return false;
    }
    return true;
  });
});
Copier après la connexion

Cette approche combine la désactivation du menu contextuel avec la détection des clics droits de la souris.

Démo :

Vous pouvez testez la solution ci-dessus en ouvrant l'exemple de code suivant et en cliquant avec le bouton droit :

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(document).mousedown(function(e) {
        if (e.button == 2) {
          alert('Right mouse button!');
        }
      });
    });
  </script>
</head>
<body>
  <h1>Test Right Mouse Click Event</h1>
</body>
</html>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal