JavaScript mit der rechten Klickmenü

Ein Kontextmenü oder mit der rechten Maustaste wird geöffnet, wenn der Benutzer mit der rechten Maustaste auf einer Webseite klickt. Manchmal müssen Entwickler möglicherweise das Standard -Kontextmenü erweitern, können dies jedoch nicht tun. Die Entwickler erstellen also ihre benutzerdefinierten Menüs. Ein benutzerdefiniertes Kontextmenü bietet die Möglichkeit, eindeutige Funktionen hinzuzufügen und die Website oder die Webseite anzupassen und für den Kontext angemessener aussehen.

Diese Studie demonstriert das Rechtsklickmenü und das Erstellen eines benutzerdefinierten Rechtsklickmenüs in JavaScript.

Was ist das Standard -Rechtsklickmenü auf einer Webseite??

Wenn Sie auf eine Webseite mit der rechten Schaltfläche Ihrer Maus klicken, wird ein Feld mit verschiedenen Menüoptionen angezeigt. Es wird ein Menü mit dem Rechtsklick oder ein Standard-Kontextmenü bezeichnet:

Sehen wir uns ein Beispiel dafür an, wie Sie auf einer Webseite ein maßgeschneidertes Menü mit der rechten Maustaste erstellen können.

Erstellen eines benutzerdefinierten Rechtsklickmenüs mit JavaScript
Wir erstellen eine einfache Webseite mit HTML und CSS und erstellen dann ein benutzerdefiniertes Rechtsklickmenü auf der Webseite mit JavaScript. Mit CSS-Eigenschaften positionieren und stylen wir unser benutzerdefiniertes Rechtsklickmenü:

JavaScript mit der rechten Klickmenü

Um ein benutzerdefiniertes Kontextmenü zu erhalten, klicken Sie auf die Seite überall auf der Seite

Schreiben Sie dann den Code für das maßgeschneiderte Menü mit der rechten Maustaste in einer JavaScript-Datei. Verblenden oder blockieren Sie zunächst das Standard -Kontextmenü auf einer Webseite.

• Ruf den "Standard verhindern()Methode, die verhindert, dass das Standardmenü mit dem rechten Klicken beim Auslösen des „Auslösens des“Kontextmenü" Fall.
• Rufen Sie die definierte Funktion mit dem Namen “auf“CreatemenuonRightClick ()”Für benutzerdefinierte rechte Klickmenü mit“e.Clientx" Und "e.ClientyArgumente, die die Maus Position zeigen:

_currentmenusible = null;
dokumentieren.AddEventListener ('contextMenu', e =>
e.Standard verhindern();
CreatemenuonRightClick (e.Clientx, e.kunden);
);

Eine Funktion definieren “CreatemenuonRightClick ()”, Die auf dem Rechtsklick des Benutzers auf der Webseite gestartet werden:

Funktion CreateMenuonRightClick (x, y)
schließen
const Menuelement = Dokument.CreateLement ('Div');
Menuelation.Klasse.add ('contextMenu');
const Menulistelement = Dokument.CreateLement ('ul');
const mseuArray = ['aktualisieren', 'öffnen', 'speichern', 'kopieren', 'hilf'];
für (var element of mseuArray)
var listElement = document.CreateLement ('li');
Listelement.innerHtml = '' + Element + '';
Menulistelement.appendChild (ListELement);

Menuelation.appendChild (Menulistelement);
dokumentieren.Körper.appendChild (Menuelement);
_currentmenusible = Menuelement;
Menuelation.Stil.display = 'block';
Menuelation.Stil.links = x + "px";
Menuelation.Stil.top = y + "px";

Lassen Sie uns das durchgehen, was in dem oben genannten Code passiert:

• Bei der rechten Maustaste schließen Sie als Erstes alle anderen Rechts- oder Kontextmenüs, die derzeit auf der Seite geöffnet sind.
• Dann erstellen wir ein neues “div”Mit dem maßgeschneiderten Menü mit der rechten Klick-Klicks hosten.
• Dann im Inneren "div”, Eine ungeordnete Liste wird hinzugefügt, die eine Reihe von Listen enthält, die als Menü auf der Webseite angezeigt werden.

Um das Kontextmenü zu schließen, klicken Sie auf irgendwo auf der Webseite. Dies wird mit dem von "gehandhabt"klickenEreignis, das ausgelöst wird, wenn der Benutzer auf die Webseite klickt, nachdem Sie das Rechtsklickmenü geöffnet haben. Dieser Ereignishandler nennt die angegebene Funktion “Kleidertheru () schließen”:

dokumentieren.AddEventListener ('Click', e =>
schließen
);

Definieren Sie nun eine Funktion “Kleidertheru () schließen”Um das Rechtsklickmenü zu schließen, in dem die" die "anrufen"ClosecontextMenu ()Methode, die das Menü schließt:

Funktion schließt
if (_currentMenusible !== null)
ClosecontextMenu (_currentmenusible);

Der "ClosecontextMenu ()Die Methode ist unten definiert:

Funktion ClosecontextMenu (Menü)
Speisekarte.Stil.links = '0px';
Speisekarte.Stil.top = '0px';
dokumentieren.Körper.removechild (Menü);
_currentmenusible = null;

Um ein Kontextmenü zu stylen oder mit der rechten Maustaste zu klicken, wenden Sie CSS auf verschiedene Elemente an, damit es gut aussieht. Fügen Sie zunächst das Body -Tag Styling hinzu, um den Text in der Mitte auszurichten und die Hintergrundfarbe festzulegen:

Körper
Text-Align: Mitte;
Hintergrund: #B7C4F1;

Stylen Sie das Menü, indem Sie die Textfarbe, die Hintergrundfarbe, den Rand und die Position auf “festlegenabsolut”:

.Kontextmenü
Position: absolut;
Breite: 100px; Höhe: Auto;
Farbe: #B7C4F1;
Hintergrund: #344683;
Grenze: 1PX Solid #344683;
Anzeige: Keine;

Stylen Sie die ungeordnete Liste mit Listenelementen, um die Polsterung und den Rand festzulegen:

.Kontextmenu ul
Polsterung: 0;
Rand: 0;

.Kontextmenu ul li
Border-Bottom: #B7C4F1 1PX Solid;
Polsterung: 0;
Rand: 0;

Setzen Sie den Rand der letzten Option des Menüs mit der “GrenzbodenEigentum, das keine sein wird;

.CONTEXTMENU UL LI: Last-Kind
Grenzboden: Keine;

Stylen Sie das Menü mit einem Anker -Tag.

.Kontextmenu li a
Text-Align: links;
Bildschirmsperre;
Polsterung: 5px 10px;
Farbe: #B7C4F1;
Texttransformation: Kapitalisieren;
Textdekoration: Keine;

Legen Sie die Hintergrundfarbe der Listenelemente auf HOVER fest:

.CONTEXTMENU UL LI A: Hover
Hintergrund: #2777ff;

Wie Sie in der Ausgabe sehen können, wird auf eine Webseite mit der rechten Maustaste klicken. Zeigt ein benutzerdefiniertes Menü mit der rechten Maustaste an:

Abschluss

Da das Standard-Kontextmenü nicht erweitert werden kann, um benutzerdefinierte Optionen hinzuzufügen. Daher muss ein benutzerdefiniertes Rechtsklickmenü erstellt werden, um dem Benutzer benutzerdefinierte Optionen zur Verfügung zu stellen. Mit Hilfe von JavaScript und CSS kann ein benutzerdefiniertes Menü mit der rechten Maustaste einfach an der aktuellen Position der Maus erstellt werden. In diesem Blog-Beitrag wurde ein maßgeschneidertes Menü mit dem rechten Klick erstellt und die Prozedur wird Schritt für Schritt erläutert.