événement de clic droit sur l'élément personnalisé jQuery-js tutoriel-php.cn

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

小云云

Libérer： 2018-01-17 13:11:45

original

1998 Les gens l'ont consulté

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;
})

Copier après la connexion

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;
}

Copier après la connexion

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"
    });
  }
})

Copier après la connexion

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>

Copier après la connexion

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!