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

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

Artikel empfehlen

10 inhaltliche Prinzipien zur Verbesserung der Website-Performance

<br />Englische Adresse: http://developer.ya...

Beispiele für einfache Hinzufügungs-, Lösch-, Änderungs- und Abfragevorgänge mit MySQL-Anweisungen

Dieser Artikel beschreibt anhand von Beispielen, ...

Detaillierte Erläuterung der kombinierten MySQL-Indexmethode

Für jedes DBMS sind die Indizes der wichtigste Op...

Eine kurze Diskussion über den magischen Schrägstrich im Nginx Reverse Proxy

Beim Konfigurieren des Nginx-Reverse-Proxys könne...

CSS realisiert Div vollständig zentriert, ohne Höhe festzulegen

Erfordern Das Div unter dem Körper ist vertikal z...

Detaillierte Erklärung zweier Tabellenkopieranweisungen: SELECT INTO und INSERT INTO SELECT (Unterschiede zwischen SQL-Datenbank und Oracle-Datenbank)

1. INSERT INTO SELECT-Anweisung Das Anweisungsfor...

Echtzeitaktualisierung einer langen Verbindung auf der Vue+WebSocket-Seite

In letzter Zeit muss das Vue-Projekt die Daten in...

XHTML-Tutorial, eine kurze Einführung in die Grundlagen von XHTML

<br />Dieser Artikel gibt Ihnen eine kurze E...

So verwenden Sie den Befehl sed, um bestimmte Zeilen einer Datei effizient zu löschen

Vorwort Wenn wir bestimmte Zeilen in einer Datei ...

Vue3 (III) Website Homepage Layout Entwicklung

Inhaltsverzeichnis 1. Einleitung 2. Tatsächliche ...

Ein Protokoll einer Notfallreaktion nach einem Einbruch in einen Linux-Server (Zusammenfassung)

Kürzlich erhielten wir von einem Kunden eine Bitt...

Beherrschen Sie die CSS-Eigenschaft „display:flow-root“-Deklaration in einem Artikel

von zhangxinxu von https://www.zhangxinxu.com/wor...

Mausposition in CSS abbilden und Seitenelemente durch Mausbewegungen steuern (Beispielcode)

Ob das Mapping der Mausposition oder das Implemen...

Detaillierte Erläuterung der MySQL-Startoptionen und Beispiele für Systemvariablen

Inhaltsverzeichnis Startoptionen Befehlszeile Lan...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.11

Die Installations- und Konfigurationsmethoden von...