Heim > Artikel > Web-Frontend > Rechtsklick-Ereignis für benutzerdefiniertes jQuery-Element

Rechtsklick-Ereignis für benutzerdefiniertes jQuery-Element

小云云Original: 2018-01-17 13:11:451940Durchsuche

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

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

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

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>

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!

jquery 事件

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des jQuery-Tip-Prompt-Plug-InsNächster Artikel：Detaillierte Erläuterung des jQuery-Tip-Prompt-Plug-Ins

In Verbindung stehende Artikel

Mehr sehen