Element: contextmenu event

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

Im letzteren Fall wird das Kontextmenü unten links vom fokussierten Element angezeigt, es sei denn, das Element ist ein Baum, dann wird das Kontextmenü unten links von der aktuellen Zeile angezeigt.

Jedes Rechtsklick-Ereignis, das nicht deaktiviert ist (durch den Aufruf der preventDefault()-Methode des Klick-Ereignisses), führt dazu, dass ein contextmenu-Ereignis auf dem anvisierten Element ausgelöst wird.

Hinweis: Eine Ausnahme in Firefox: Wenn der Benutzer die Shift-Taste gedrückt hält, während er mit der rechten Maustaste klickt, wird das Kontextmenü angezeigt, ohne dass ein contextmenu-Ereignis ausgelöst wird.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignis-Handler-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. Weitere Informationen finden Sie unter Browser-Kompatibilität.

Ereigniseigenschaften

Diese Schnittstelle erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Schreibgeschützt Experimentell: Stellt den Winkel zwischen einer Transducerachse (einem Zeiger oder Stylus) und der X-Y-Ebene eines Gerätebildschirms dar.
PointerEvent.azimuthAngle Schreibgeschützt Experimentell: Stellt den Winkel zwischen der Y-Z-Ebene und der Ebene dar, die sowohl die Transducerachse (einem Zeiger oder Stylus) 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 (Magnitude auf der X-Achse), in CSS-Pixeln, der Kontaktgeometrie des Zeigers.
PointerEvent.height Schreibgeschützt: Die Höhe (Magnitude auf der Y-Achse), in CSS-Pixeln, der Kontaktgeometrie des Zeigers.
PointerEvent.pressure Schreibgeschützt: Der normalisierte Druck der Zeigereingabe im Bereich von 0 bis 1, wobei 0 und 1 den minimalen und maximalen Druck darstellen, den die Hardware erkennen kann.
PointerEvent.tangentialPressure Schreibgeschützt: Der normalisierte tangentiale Druck der Zeigereingabe (auch bekannt als Barrel-Druck oder Zylinderbelastung) im Bereich von -1 bis 1, wobei 0 die neutrale Position der Steuerung ist.
PointerEvent.tiltX Schreibgeschützt: Der Winkel (in Grad, im Bereich von -90 bis 90) zwischen der Y–Z-Ebene und der Ebene, die sowohl die Zeigerachse (z.B. Pen Stylus) als auch die Y-Achse enthält.
PointerEvent.tiltY Schreibgeschützt: Der Winkel (in Grad, im Bereich von -90 bis 90) zwischen der X–Z-Ebene und der Ebene, die sowohl die Zeigerachse (z.B. Pen Stylus) als auch die X-Achse enthält.
PointerEvent.twist Schreibgeschützt: Die Drehung des Zeigers (z.B. Pen Stylus) im Uhrzeigersinn 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 verursacht hat (Maus, Stift, Touch 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 bei einem Rechtsklick nichts tun, während der zweite Absatz das Standard-Kontextmenü Ihres Browsers anzeigen wird.

Hinweis: In Firefox, wenn Sie die Shift-Taste gedrückt halten, während Sie mit der rechten Maustaste klicken, wird das Kontextmenü angezeigt, 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

Browser-Kompatibilität

BCD tables only load in the browser