recherche

Maison  >  Article  >  interface Web  >  événement de clic droit sur l'élément personnalisé jQuery

événement de clic droit sur l'élément personnalisé jQuery

小云云
小云云original
2018-01-17 13:11:451961parcourir

Cet article vous propose principalement un événement de clic droit sur un élément personnalisé jQuery (cas d'implémentation). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Dans la plupart des cas, nous utilisons le clic gauche pour interagir avec la page, et le clic droit est principalement destiné aux développeurs pour examiner les éléments. Parfois, nous devons également personnaliser le comportement du clic droit de la souris pour obtenir de meilleurs résultats. Interactivité, les bandes dessinées courantes incluent un clic gauche pour avancer et un clic droit pour revenir en arrière.

La première étape consiste à bloquer le comportement de clic droit par défaut du navigateur, c'est-à-dire à bloquer les fenêtres contextuelles.

Tout d'abord, liez la fonction de prévention des pop-ups à l'élément cible : 

//阻止浏览器默认右键点击事件
$("p").bind("contextmenu", function(){
  return false;
})

De cette façon, l'événement de clic droit de l'élément p est bloqué, tandis que d'autres zones de l'élément p sont bloquées. le navigateur ne sont pas affectés. Impact, si vous souhaitez bloquer les événements de clic droit sur la page entière, faites simplement ceci : 

document.oncontextmenu = function() {
  return false;
}

Ensuite, vous pouvez lier la fonction de réponse du clic droit à l'élément : 

$("p").mousedown(function(e) {
  console.log(e.which);
  //右键为3
  if (3 == e.which) {
    $(this).css({
      "font-size": "-=2px"
    });
  } else if (1 == e.which) {
    //左键为1
    $(this).css({
      "font-size": "+=3px"
    });
  }
})

L'exemple d'effet est qu'un clic droit réduit la taille de la police, un clic gauche la taille de la police l'augmente et d'autres zones peuvent répondre à l'événement de clic droit par défaut.

Code complet : 

<head>
  <style type="text/css">
  p{
    font-size:20px;
  }
  </style>
  <script src="../jquery.js"></script>
  <script>
  $(function() {
    //阻止浏览器默认右键点击事件
    /*document.oncontextmenu = function() {
      return false;
    }*/
    //某元素组织右键点击事件
    $("p").bind("contextmenu", function(){
      return false;
    })
    $("p").mousedown(function(e) {
      console.log(e.which);
      //右键为3
      if (3 == e.which) {
        $(this).css({
          "font-size": "-=2px"
        });
      } else if (1 == e.which) {
        //左键为1
        $(this).css({
          "font-size": "+=3px"
        });
      }
    })
  })
  </script>
</head>

<body>
  <p>
    p
  </p>
</body>

Recommandations associées :

C# Explication détaillée de la façon d'obtenir le contenu d'une cellule que le clic droit de la souris sur la liste

Comment jQuery détecte les clics gauche et droit de la souris_jquery

ztree de jquery implémente la fonction de collecte par clic droit

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!

jquery 事件
Déclaration：
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
Article précédent：Explication détaillée du plug-in d'invite de pointe jQueryArticle suivant：Explication détaillée du plug-in d'invite de pointe jQuery

Articles Liés

Voir plus