Heim >Web-Frontend >CSS-Tutorial >Wie füge ich einer Webseite ein benutzerdefiniertes Rechtsklick-Menü hinzu?
Wie füge ich einer Webseite ein benutzerdefiniertes Rechtsklick-Menü hinzu?
- WBOYnach vorne
- 2023-09-15 23:29:021002Durchsuche
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.
Standardkontextmenü entfernen oder ausblenden
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.
Schritte
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.
Beispiel
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.
Schritte
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
-
Schritt 3 – Im letzten Schritt fügen wir dem benutzerdefinierten Menü JavaScript-Funktionalität hinzu, um es auf der Webseite anzuzeigen, nachdem der Benutzer mit der rechten Maustaste auf die Seite geklickt hat.
Beispiel
Die folgenden Beispiele veranschaulichen, wie Sie verhindern können, dass das Standardkontextmenü angezeigt wird, und wie Sie ein benutzerdefiniertes Kontextmenü hinzufügen und anzeigen −
<html>
<head>
<style>
#customContextMenu {
position: absolute;
background-color: #84abb5;
color: white;
height: 150px;
width: 100px;
text-align: center;
}
.menuItems {
list-style: none;
font-size: 12px;
padding: 0;
margin: 0;
}
.menuItems .items { padding: 5px; border-bottom: 1px solid #e6d4b6;}
.menuItems .items:last-child { border: none;}
.menuItems .items a {text-decoration: none; color: white;}
</style>
</head>
<body>
<div style = "background-color: green; color: white; height: 150px; text-align: center;">
<h2> Add a custom right-click menu to a webpage </h2>
<p> Please right click to to see the menu </p>
</div>
<div id = "customContextMenu" style = "display: none;">
<ul class = "menuItems">
<li class = "items"><a href = "#"> Menu Item-1 </a></li>
<li class = "items"><a href = "#"> Menu Item-2 </a></li>
<li class = "items"><a href = "#"> Menu Item-3 </a></li>
<li class = "items"><a href = "#"> Menu Item-4 </a></li>
<li class = "items"><a href = "#"> Menu Item-5 </a></li>
<li class = "items"><a href = "#"> Menu Item-6</a></li>
</ul>
</div>
<script>
// hiding the menu on click to the document
function hideCustomContextMenu() {
document.getElementById('customContextMenu').style.display = "none";
}
// toggling the menu on right click to the page
function showCustomContextMenu(event) {
event.preventDefault();
var myContextMenu = document.getElementById('customContextMenu');
if (myContextMenu.style.display == "block") {
myContextMenu.style.display = "none";
}
else {
myContextMenu.style.display = "block";
myContextMenu.style.left = event.pageX + "px";
myContextMenu.style.top = event.pageY + "px";
}
}
document.onclick = hideCustomContextMenu;
document.oncontextmenu = showCustomContextMenu;
</script>
</body>
</html>
In diesem Beispiel blenden wir das Standardkontextmenü aus und zeigen unser selbst erstelltes Kontextmenü an, wenn wir mit der rechten Maustaste auf die Seite klicken, an der Position des Cursors, wenn darauf geklickt wird.
Fazit
In diesem Artikel haben wir erfahren, wie Sie den Standardkontextwert entfernen oder ausblenden, wenn Sie mit der rechten Maustaste auf eine Webseite klicken, und in derselben Aktion unser eigenes benutzerdefiniertes Kontextmenü anzeigen. Auf diese Weise können wir ein benutzerdefiniertes Kontextmenü mit den Optionen hinzufügen, die darin angezeigt werden sollen.
Das obige ist der detaillierte Inhalt vonWie füge ich einer Webseite ein benutzerdefiniertes Rechtsklick-Menü hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!