Element: contextmenu event

Das contextmenu-Ereignis wird ausgelöst, wenn der Benutzer versucht, ein Kontextmenü zu öffnen. Dieses Ereignis wird normalerweise durch Klicken der rechten Maustaste oder durch Drücken der Kontextmenü-Taste ausgelöst.

Im letzteren Fall wird das Kontextmenü unten links im fokussierten Element angezeigt, es sei denn, das Element ist ein Baum. In diesem Fall wird das Kontextmenü unten links in der aktuellen Zeile angezeigt.

Jedes Rechtsklick-Ereignis, das nicht deaktiviert wird (durch Aufruf der Methode preventDefault() des Klickevents), führt dazu, dass ein contextmenu-Ereignis auf das anvisierte Element ausgelöst wird.

Hinweis: Eine Ausnahme dafür in Firefox: Wenn der Benutzer die Shift-Taste gedrückt hält, während er mit der rechten Maustaste klickt, wird das Kontextmenü ohne Auslösen eines contextmenu-Ereignisses angezeigt.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Eventhandler-Eigenschaft.

addEventListener("contextmenu", (event) => {});

oncontextmenu = (event) => {};

Ereignistyp

Ein PointerEvent. Erbt von MouseEvent.

Hinweis: In früheren Versionen der Spezifikation war der Ereignistyp für dieses Ereignis ein MouseEvent. Überprüfen Sie die Browser-Kompatibilität für weitere Informationen.

Ereigniseigenschaften

Diese Schnittstelle erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Schreibgeschützt Experimentell: Repräsentiert den Winkel zwischen einer Achse eines Transducers (einem Zeiger oder Stift) und der X-Y-Ebene eines Geräts.
PointerEvent.azimuthAngle Schreibgeschützt Experimentell: Repräsentiert den Winkel zwischen der Y-Z-Ebene und der Ebene, die sowohl die Achse des Transducers (einem Zeiger oder Stift) als auch die Y-Achse enthält.
PointerEvent.pointerId Schreibgeschützt: Eine eindeutige Kennung für den Zeiger, der das Ereignis verursacht.
PointerEvent.width Schreibgeschützt: Die Breite (Entfernung auf der X-Achse) der Kontaktgeometrie des Zeigers in CSS-Pixeln.
PointerEvent.height Schreibgeschützt: Die Höhe (Entfernung auf der Y-Achse) der Kontaktgeometrie des Zeigers in CSS-Pixeln.
PointerEvent.pressure Schreibgeschützt: Der normalisierte Druck des Zeigereingangs im Bereich von 0 bis 1, wobei 0 und 1 den minimalen bzw. maximalen Druck darstellen, den die Hardware erkennen kann.
PointerEvent.tangentialPressure Schreibgeschützt: Der normalisierte tangentiale Druck des Zeigereingangs (auch bekannt als Laufdruck oder Zylinderstress) im Bereich von -1 bis 1, wobei 0 die Neutralstellung der Steuerung ist.
PointerEvent.tiltX Schreibgeschützt: Der ebene Winkel (in Grad, im Bereich von -90 bis 90) zwischen der Y-Z-Ebene und der Ebene, die sowohl die Achse des Zeigers (z. B. eines Stiftstylus) als auch die Y-Achse enthält.
PointerEvent.tiltY Schreibgeschützt: Der ebene Winkel (in Grad, im Bereich von -90 bis 90) zwischen der X-Z-Ebene und der Ebene, die sowohl die Achse des Zeigers (z. B. eines Stiftstylus) als auch die X-Achse enthält.
PointerEvent.twist Schreibgeschützt: Die Drehung im Uhrzeigersinn des Zeigers (z. B. eines Stiftstylus) um seine Hauptachse in Grad, mit einem Wert im Bereich von 0 bis 359.
PointerEvent.pointerType Schreibgeschützt: Gibt den Gerätetyp an, der das Ereignis ausgelöst hat (Maus, Stift, Berührung usw.).
PointerEvent.isPrimary Schreibgeschützt: Gibt an, ob der Zeiger den primären Zeiger dieses Zeigertyps darstellt.

Beispiele

Das `contextmenu`-Ereignis abbrechen

In diesem Beispiel wird die Standardaktion des contextmenu-Ereignisses mit preventDefault() abgebrochen, wenn das contextmenu-Ereignis beim ersten Absatz ausgelöst wird. Dadurch wird der erste Absatz beim Rechtsklicken nichts tun, während der zweite Absatz das standardmäßige Kontextmenü des Browsers anzeigt.

Hinweis: In Firefox wird das Kontextmenü angezeigt, wenn die Shift-Taste gedrückt gehalten wird, während mit der rechten Maustaste geklickt wird, ohne dass das contextmenu-Ereignis ausgelöst wird. Daher verhindert das Abbrechen des Ereignisses nicht, dass das Kontextmenü angezeigt wird.

HTML

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

Specification
UI Events # event-type-contextmenu