Wenn Sie heutzutage mit der rechten Maustaste auf eine beliebige Webseite klicken, wird eine Liste mit einigen Optionen und Funktionen angezeigt. Dieses Popup-Menü wird auch Kontextmenü genannt und ist das vom Browser bereitgestellte Standard-Popup-Menü. Die Elemente in dieser Menüliste variieren je nach Browser. Einige Browser bieten mehr Funktionen, während andere nur eingeschränkte Funktionen bieten.
Aber hier ist eine Möglichkeit, ein benutzerdefiniertes Kontextmenü oder ein Rechtsklick-Menü auf Ihren Webseiten hinzuzufügen. Sie können so viele Optionen hinzufügen, wie Sie möchten. Bevor Sie jedoch ein benutzerdefiniertes Kontextmenü hinzufügen können, müssen Sie das Verhalten des standardmäßigen Rechtsklicks auf eine Webseite ändern, wodurch das Standardkontextmenü geöffnet wird. Das Hinzufügen eines benutzerdefinierten Kontextmenüs umfasst die folgenden zwei Schritte:
Ändern Sie das Standardverhalten für die Anzeige des Standard-Rechtsklickmenüs.
Fügen Sie unser eigenes benutzerdefiniertes Kontextmenü hinzu und zeigen Sie es mit einem rechten Mausklick auf der Webseite an.
Lassen Sie uns nun die beiden oben genannten Schritte Schritt für Schritt anhand tatsächlicher Codebeispiele im Detail verstehen.
Um unser benutzerdefiniertes Kontextmenü anzuzeigen, wenn Sie mit der rechten Maustaste auf eine Webseite klicken, müssen wir zunächst das Standardkontextmenü entfernen oder ausblenden, indem wir dem document.oncontextmenu-Ereignis Changes eine Funktion zuweisen, die die Methode preventDefault() enthält das Standardverhalten des Rechtsklicks, das diese Funktion aufruft, wenn der Benutzer mit der rechten Maustaste auf die Webseite klickt.
Besprechen wir die tatsächliche Implementierung des Standardverhaltens, das das Ausblenden des Standardkontextmenüs verhindert.
Schritt 1 − Im ersten Schritt erstellen wir ein HTML-Dokument und eine Webseite, um unseren Code zu testen.
Schritt 2 – In diesem Schritt fügen wir das oncontextmenu-Ereignis im HTML-Dokument hinzu, da das Menü angezeigt wird, wenn Sie mit der rechten Maustaste auf die gesamte Webseite klicken.
Schritt 3 – Im letzten Schritt definieren wir eine JavaScript-Funktion mit der Methode „preventDefault()“ oder geben „false“ zurück, um zu verhindern, dass das Standardkontextmenü angezeigt wird.
Das folgende Beispiel zeigt, wie Sie das Standardverhalten des Standardkontextmenüs ändern und ausblenden können −
<html>
<body>
<div style = "background-color: #84abb5; color: white; height: 150px; text-align: center;">
<h2>It is the Demo web page for testing. </h2>
</div>
<script>
document.oncontextmenu = hideRightClickMenu;
function hideRightClickMenu(event) {
event.preventDefault()
// OR
// return false;
}
</script>
</body>
</html>
Im obigen Beispiel haben wir gesehen, wie man die standardmäßige Kontextmenüfunktionalität entfernt oder ausblendet, wenn man mit der rechten Maustaste auf eine Seite klickt, indem man mit der Methode preventDefault() eine Funktion zuweist.
Lassen Sie uns nun verstehen, wie Sie ein benutzerdefiniertes Kontextmenü hinzufügen und es sichtbar machen, wenn Sie mit der rechten Maustaste auf die Seite klicken.
Schritt 1 - Im ersten Schritt erstellen wir eine Liste der Elemente, die im Kontextmenü angezeigt werden müssen, und lassen sie sichtbar: Keine; standardmäßig ist sie nur sichtbar, wenn Sie mit der rechten Maustaste auf die Seite klicken.
Schritt 2 – Im nächsten Schritt verwenden wir das