Element: contextmenu-Ereignis
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Das contextmenu-Ereignis wird ausgelöst, wenn der Benutzer versucht, ein Kontextmenü zu öffnen. Dies geschieht in der Regel durch einen Klick mit der rechten Maustaste oder durch Drücken der Kontextmenütaste.
Im letzteren Fall wird das Kontextmenü links unten am fokussierten Element angezeigt. Handelt es sich bei dem Element um eine Baumansicht, wird es stattdessen links unten an der aktuellen Zeile angezeigt.
Jeder Rechtsklick, dessen Standardverhalten nicht durch Aufrufen der Methode preventDefault() für das Klickereignis verhindert wird, löst ein contextmenu-Ereignis am Zielelement aus.
Hinweis:
In Firefox gibt es eine Ausnahme: Wenn Sie beim Rechtsklick die Shift-Taste gedrückt halten, wird das Kontextmenü angezeigt, ohne dass ein contextmenu-Ereignis ausgelöst wird.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("contextmenu", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft des Interfaces zuweisen:
oncontextmenu = (event) => { }
Ereignistyp
Ein PointerEvent. Erbt von MouseEvent.
Hinweis:
In früheren Versionen der Spezifikation war der Ereignistyp für dieses Ereignis ein MouseEvent. Weitere Informationen finden Sie unter Browser-Kompatibilität.
Beispiele
Das contextmenu-Ereignis abbrechen
In diesem Beispiel wird die Standardaktion des contextmenu-Ereignisses mit preventDefault() verhindert, wenn das Ereignis am ersten Absatz ausgelöst wird. Daher geschieht bei einem Rechtsklick auf den ersten Absatz nichts, während beim zweiten Absatz das Standardkontextmenü Ihres Browsers angezeigt wird.
Hinweis:
Wenn Sie in Firefox beim Rechtsklick die Shift-Taste gedrückt halten, wird das Kontextmenü angezeigt, ohne dass das contextmenu-Ereignis ausgelöst wird. Das Verhindern des Ereignisses kann die Anzeige des Kontextmenüs daher in diesem Fall nicht unterbinden.
HTML
<p id="noContextMenu">The context menu has been disabled on this paragraph.</p>
<p>But it has not been disabled on this one.</p>
JavaScript
const noContext = document.getElementById("noContextMenu");
noContext.addEventListener("contextmenu", (e) => {
e.preventDefault();
});
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Pointer Events # contextmenu |