JavaScript/Tutorials/Kontextmenü

20min

mittel

● JavaScript

Bei grafischen Benutzeroberflächen ist ein Kontextmenü ein Steuerelement, das dem Benutzer zu einem bestimmten Kontext verschiedene Aktionen zur Auswahl anbietet. Im Gegensatz zum normalen Menü enthält ein Kontextmenü nur Menüpunkte, die zum jeweiligen Zeitpunkt für das ausgewählte Objekt sinnvoll sind. Dadurch sollen Kontextmenüs übersichtlich bleiben.

Es wird üblicherweise mit der zweiten Maustaste (bei Rechtshändern ist es die rechte) angeklickt. Auf der Tastatur gibt es ebenfalls eine Taste (meist Shift + F10), die ein Kontextmenü aufruft. Die beiden Menüs können sich von einander unterscheiden. Das eine liefert ein Menü in Abhängigkeit vom Mauszeiger, das andere eines in Abhängigkeit vom Textcursor.

Auf Touchgeräten wird das Kontextmenü mit einem längeren Fingerdruck, dem so genannten "touch and hold" ausgelöst.

In diesem Tutorial wird gezeigt, wie Sie ein alternatives, selbst gestyltes Kontextmenü erstellen. Bei Progressiven Web Apps kann so zum Beispiel eine Toolbar mit verschiedenen Werkzeugen geladen werden.

Anwendungsbeispiele

Rechtsklick unterdrücken

Beim Klick mit der rechten Maustaste (oder dem längeren Fingerdrücken mit touch and hold) wird das contextmenu-Ereignis gefeuert, das Sie unterbinden und damit den Rechtsklick unterdrücken können.

Beispiel ansehen …

document.addEventListener('DOMContentLoaded', function () {
	
	document.querySelector('img').addEventListener('contextmenu', function(e) {
		// Alternative
	    e.preventDefault();
	}, false);

});

Beim Rechtsklick auf das Bild wird beim contextmenu-Event mit preventDefault das Standardverhalten unterbunden.

Beachten Sie: Viele Browser überlassen es dem Benutzer in seinen Einstellungen festzulegen, ob er das Kontextmenü öffnen will oder nicht. Einstellungen der Webseite werden damit wirkungslos.
Ein Bilderklau kann auch über "Grafik anzeigen" oder über den Cache erfolgen.

Grundfunktionalität

Neben dem nav-Element für Navigationen zu anderen Seiten gab es seit jeher schon das menu-Element. Es wurde wurde in HTML4.01 als deprecated angesehen, in HTML5 wieder aufgenommen. In HTML 5.2 wurde es erneut obsolet, gehört nun in einer abgespeckten Variante aber nun zum Living Standard. Semantisch entspricht es einer ul, anstelle der obsoleten menuitems werden einfach li-Elemente verwendet.

ein eigenes Kontextmenü ansehen …

<div id="context-menu" hidden>
   <h2>eigenes Kontextmenü</h2>
   <menu>
        <li><button id="hide">verstecken</button></li>
        <li><button id="show">Anzeigen</button>
            <ul>
                <li><button id="showUrl">URL anzeigen</button></li>
                <li><button id="showSrc">SRC anzeigen</button></li>
            </ul></li>
        <li><button id="move">1x normales Kontextmenü</button></li>
    </menu>
</div>

Das Kontextmenü besteht aus einem div-Element, das eine Überschrift und eine Liste beinhaltet. Dafür ewird das (relativ unbekannte) menu-Element verwendet. Innerhalb der Listenelemente befinden sich button-Elemente, die auch mit der Tastatur fokussiert werden können.

Über das Attribut hidden ist das Kontextmenü vorerst ausgeblendet. Die Buttons haben noch keine Funktionalität, sie wird mit JavaScript nachgerüstet.

Beachten Sie: Eine CSS-Festlegung mit display setzt sich über das hidden-Attribut weg und sorgt dafür, dass das Element sichtbar bleibt.

ein eigenes Kontextmenü ansehen …

	const menu = document.querySelector('#context-menu');
	
	document.addEventListener('contextmenu', (event) => {
		event.preventDefault();

		const { clientX: mouseX, clientY: mouseY } = event;
		
		menu.style.top  = `${mouseY}px`;
		menu.style.left = `${mouseX}px`;

		menu.removeAttribute('hidden');
	});

Wenn nun der contextmenu-Event ausgelöst wird, wird

• mit event.preventDefault() das Standardverhalten unterdrückt
• die X und y-Koordinaten ausgelesen
• das hidden-Attribut des bisher unsichtbaren Kontextmenüs mit removeAttribute entfernt

So wird unser eigenes Kontextmenü an der passenden Stelle eingeblendet.

Ausblenden des Kontextmenüs

Unser Kontextmenü erscheint auf der Oberfläche, wenn wir mit der rechten Maustaste klicken, aber da es keine Schaltfläche zum Schließen hat, bleibt es für immer sichtbar, ohne die Möglichkeit, es zu entfernen.

Lassen wir es nach einer Benutzeraktion wie dem Klick auf eine Funktion oder einen Tastendruck wieder ausblenden.

Ausblenden des Kontextmenüs bei Klick ansehen …

	document.addEventListener('click', (e) => {
		if (e.target.offsetParent != menu) {
			menu.setAttribute('hidden','true');
		}
	});

Ein neuer Eventlistener lauscht auf Clicks. Wird im Dokument geklickt, wird mit offsetParent überprüft, ob der Click im Kontextmenü ausgelöst wurde. Ist dies nicht der Fall, wird mit der setAttribute-Methode das hidden-Attribut wieder gesetzt. Als Wert kann true oder eine leere Zeichenkette übergeben werden.

Ausblenden mit ESC ansehen …

	document.addEventListener('keyup', (e) => {
		if (e.key === 'Escape') {
			menu.setAttribute('hidden','true');
		}
	});

Bei einem Drücken der ESC-Taste wird der keyup-Event gefeuert und nach einer Überprüfung des keyCodes wieder hidden gesetzt.

Funktionen des Kontextmenüs

In einem nächsten Schritt müsste nun das Kontextmenü mit Funktionen gefüllt werden.

ToDo (weitere ToDos)

evtl. Use-Case für Progressive Web App

---Matthias Scharwies (Diskussion) 06:57, 6. Sep. 2017 (CEST)

Siehe auch

• Referenz: HTML/Elemente/menu
• das contextmenu-Event
• Navigation Tutorials rund um Menüs und Navigationen