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

So verwenden Sie video.js in Vue zum Abspielen von Videos im M3U8-Format

Probleme und Lösungen bei der Verwendung des V-Modells zum bidirektionalen Binden der Werte von übergeordneten und untergeordneten Komponenten in Vue

Inhaltsverzeichnis Szenario Versuchen Sie zu löse...

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

So verwenden Sie video.js in Vue zum Abspielen von Videos im M3U8-Format

Detaillierte Erläuterung der JavaScript-BOM-Zusammensetzung und häufiger Ereignisse

So schreiben Sie die übergeordneten und untergeordneten Verzeichnisse von relativen HTML-Pfaden

Eine kurze Erläuterung der Unterschiede zwischen FTP, FTPS und SFTP

Problem mit der Groß-/Kleinschreibung in der MySQL-Datenbank

MySQL-Methode und Beispiel für langsame Abfragen

svg+css oder js zum Erstellen eines Tick-Animationseffekts

So ändern Sie die Portzuordnung eines laufenden Docker-Containers

Zusammenfassung der HOC-Nutzung von React-High-Order-Komponenten

Detaillierte Erklärung zur Erstellung von Schießspielen mit CocosCreator

Artikel empfehlen

LinkedIn wird überarbeitet, um das Surfen auf der Website zu vereinfachen

Interpretation von 17 Werbewirksamkeitsmaßen

Automatische Sicherung der MySQL-Datenbank per Shell-Skript

Sieben verschiedene Farbschemata für das Website-Design-Erlebnis

Was sind die neuen CSS-Pseudoklassenfunktionen :where und :is?

So verwenden Sie CSS-Pseudoelemente, um den Stil mehrerer aufeinanderfolgender Elemente zu steuern

HTML+CSS+JS zur Implementierung des Spiels „Nicht auf das Whiteboard treten“

Verwenden Sie Javascript, um eine dynamische QQ-Registrierungsseite zu erstellen

So verwenden Sie Typescript zum Kapseln von lokalem Speicher

Das Lazy-Loading-Attributmuster in JavaScript verstehen

Probleme und Lösungen bei der Verwendung des V-Modells zum bidirektionalen Binden der Werte von übergeordneten und untergeordneten Komponenten in Vue

Detaillierte Erklärung des Integer-Datentyps tinyint in MySQL

Erläuterung des Beispiels einer MySQL-Datenanalyse-Speicher-Engine

Lösung für das Problem, dass die Seite leer ist, wenn die Seite mit der Quelldatei in IE7 geöffnet wird

Hallo – Erfahrungsaustausch zum Entwurf von Dialogfeldern