JavaScript, um den Effekt des Klickens auf das selbst erstellte Menü zu erzielen

In diesem Artikel wird der spezifische JavaScript-Code zur Erzielung des Klickeffekts auf das selbst erstellte Menü als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Anwendungsszenario: Wenn wir nicht möchten, dass den Benutzern beim Rechtsklick das Standardbrowsermenü angezeigt wird, müssen wir das Standardverhalten des Browsers verhindern und den gewünschten Effekt ausführen.

Der erste Weg besteht darin, Elemente zu erstellen

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
  <Stil>
    Körper {
      Höhe: 3000px;
    }
    
    .Speisekarte {
      Breite: 100px;
      Höhe: 280px;
      Hintergrundfarbe: rot;
      Position: absolut;
      links: 0;
      oben: 0;
      Anzeige: keine;
    }
  </Stil>
</Kopf>

<Text>
  <Skript>
    var Bon = wahr;
    var Menü = null;
    document.oncontextmenu = Funktion(Ereignis) {
      wenn (Bon) {
        Menü = Dokument.ErstellenElement("div");
        menu.classList.add("Menü");
        Dokument.Body.AppendChild(Menü);
        Menü.Stil.links = Ereignis.SeiteX + "px";
        Menü.Stil.oben = Ereignis.SeiteY + "px";
        Menü.Stil.Anzeige = "Block";
        Bon = falsch;
        event.preventDefault();
      } anders {
        Menü.Stil.links = Ereignis.SeiteX + "px";
        Menü.Stil.oben = Ereignis.SeiteY + "px";
        event.preventDefault();
      }
    }

    Dokument.onmousedown = Funktion(e) {
      wenn (e.button == 0) {
        var Menü = Dokument.QuerySelector(".Menü");
        Dokument.Body.RemoveChild(Menü);
        Bon = wahr;
      }
    }
  </Skript>
</body>

</html>

Die zweite Methode : durch Ausblenden von Elementen

<div Klasse="Menü"></div>
 <Skript>
    var Menü = Dokument.QuerySelector(".Menü");
    document.oncontextmenu = Funktion(Ereignis) {
      Menü.Stil.links = Ereignis.SeiteX + "px";
      Menü.Stil.oben = Ereignis.SeiteY + "px";
      Menü.Stil.Anzeige = "Block";
      event.preventDefault();
    }
    Dokument.onmousedown = Funktion(e) {
      wenn (e.button == 0) {
        Menü.Stil.Anzeige = "keine";
      }
    }
</Skript>

Wenn wir mit der rechten Maustaste klicken, wird das Standardmenü nicht angezeigt, aber das von mir festgelegte rote Feld wird angezeigt.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

js Dropdown-Menü-Klicks neben der Implementierung zum Zusammenklappen (Fallstrick-Aufzeichnung)
js realisiert den Effekt der Anzeige des aktuellen Inhalts durch Klicken auf das sekundäre Menü
JS implementiert ein Beispiel für das Klicken auf das Dropdown-Menü, um den ausgewählten Inhalt mit dem Eingabefeld zu synchronisieren
Implementieren Sie einfach js click, um die sekundäre Menüfunktion zu erweitern
js implementiert den Schiebemenü-Effektcode durch Klicken auf die obere linke Ecke der Maus
js implementiert den Dropdown-Menü-Effektcode, der sich beim Klicken nach unten erweitert
CSS + JS-Methode zum automatischen Schließen des DIV-Ebenenmenüs durch Klicken auf das Text-Popup
Ein einfaches Beispiel für das Anzeigen oder Ausblenden des Effekts eines JS-Menüklicks
Beispiel für einen Js-Klick-Popup-Dropdown-Menüeffekt
Klicken Sie auf das Dropdown-Menü, um den JS-Code für die Verbindungssprungfunktion zu implementieren

<<: Automatische Sicherung der MySQL-Datenbank per Shell-Skript

>>: Zwei Möglichkeiten zum vollständigen Löschen von Benutzern unter Linux

Detaillierte Erläuterung zum Einrichten einer statischen IP-Netzwerkkarte für die virtuelle CentOS 8-VMware-Maschine für den Zugriff auf das Internet

Artikel

Lösung für den MySQL-Fehler „Tabelle kann nicht gelesen werden“ (MySQL-Fehler 1018)

JavaScript, um den Effekt des Klickens auf das selbst erstellte Menü zu erzielen

Detaillierte Erläuterung zum Einrichten einer statischen IP-Netzwerkkarte für die virtuelle CentOS 8-VMware-Maschine für den Zugriff auf das Internet

Lösung für den MySQL-Fehler „Tabelle kann nicht gelesen werden“ (MySQL-Fehler 1018)

Vollständiger Prozessbericht der Nginx-Reverse-Proxy-Konfiguration

Sehen Sie sich die häufig verwendeten SQL-Anweisungen in MySQL an (ausführliche Erklärung)

Verwenden Sie Dockercompose, um eine Springboot-MySQL-Nginx-Anwendung zu erstellen

JavaScript implementiert die Verarbeitung großer Datei-Uploads

mysql Backup-Skript und halten Sie es für 7 Tage

V-Bind in Vue verstehen

Einführung in MySQL-Trigger, Erstellen von Triggern und Analyse von Nutzungsbeschränkungen

Zwei Möglichkeiten zum korrekten Bereinigen von MySQL-Binlog-Protokollen

Artikel empfehlen

Detaillierte Erklärung des Lebenszyklus von Angular-Komponenten (Teil 2)

Lösung zum Vergessen des MySQL-Datenbankkennworts

Erläuterung der Array-Verarbeitung in React und Redux

Einige Gedanken und Erfahrungen zum Thema Gestaltung und Erstellung von Webseiten (Websites)

jQuery-Plugin zum Implementieren eines schwebenden Menüs

Ideen und Codes zur Realisierung des Lupeneffekts in js

Einige Dinge, die beim Erstellen einer Webseite zu beachten sind

So stellen Sie Node.js mit Docker bereit

Der Unterschied zwischen distinct und group by in MySQL

Lösung für das Problem „Tabelle mysql.plugin existiert nicht“ beim Deployment von MySQL

HTML5+CSS3-Codierungsstandards

So verwenden Sie reguläre Ausdrucksabfragen in MySql

So verhindern Sie die Weiterleitung von Hyperlinks mithilfe von JavaScript (mehrere Schreibweisen)

Zusammenfassung der allgemeinen MySQL-SQL-Anweisungen einschließlich komplexer SQL-Abfragen

Wenn Navicat eine Verbindung zu MySQL herstellt, meldet es 10060, 1045 Fehler und den Speicherort von my.ini