Rechtsklick-Ereignis für benutzerdefiniertes jQuery-Element-js-Tutorial-php.cn

Rechtsklick-Ereignis für benutzerdefiniertes jQuery-Element

小云云

Freigeben： 2018-01-17 13:11:45

Original

1894 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich ein Rechtsklickereignis für ein benutzerdefiniertes jQuery-Element vorgestellt (Implementierungsfall). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

In den meisten Fällen verwenden wir den Linksklick, um mit der Seite zu interagieren, und der Rechtsklick dient hauptsächlich dazu, dass Entwickler Elemente überprüfen. Manchmal müssen wir auch das Rechtsklickverhalten der Maus anpassen, um bessere Ergebnisse zu erzielen. Interaktivität, gängige Comics umfassen das Klicken mit der linken Maustaste zum Vorwärtsgehen und das Klicken mit der rechten Maustaste zum Zurückgehen.

Der erste Schritt besteht darin, das standardmäßige Rechtsklickverhalten des Browsers zu blockieren, d. h. Popup-Fenster zu verhindern.

Binden Sie zunächst die Popup-Verhinderungsfunktion an das Zielelement:

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

Nach dem Login kopieren

Auf diese Weise wird das Rechtsklickereignis des p-Elements blockiert, während andere Bereiche des Browser sind nicht betroffen. Wenn Sie Rechtsklick-Ereignisse auf der gesamten Seite blockieren möchten, gehen Sie einfach wie folgt vor:

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

Nach dem Login kopieren

Dann können Sie die Rechtsklick-Antwortfunktion an das Element binden:

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

Nach dem Login kopieren

Der Beispieleffekt besteht darin, dass ein Rechtsklick die Schriftgröße verringert, ein Linksklick die Schriftgröße vergrößert und andere Bereiche auf das Standard-Rechtsklick-Ereignis reagieren können.

Vollständiger Code:

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

Nach dem Login kopieren

Verwandte Empfehlungen:

C# Detaillierte Erklärung, wie man den Inhalt einer Zelle erhält, die Klicken Sie mit der rechten Maustaste auf in der Listenansicht.

Wie jQuery linke und rechte Mausklicks erkennt_jquery

jquerys Ztree implementiert die Funktion zum Sammeln mit der rechten Maustaste

Das obige ist der detaillierte Inhalt vonRechtsklick-Ereignis für benutzerdefiniertes jQuery-Element. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!