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.

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

oncontextmenu = (event) => {};

Ereignistyp

Ein PointerEvent. Erbt von MouseEvent.

Event UIEvent MouseEvent PointerEvent

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

js
const noContext = document.getElementById("noContextMenu");

noContext.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});

Ergebnis

Spezifikationen

Specification
UI Events
# event-type-contextmenu

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
contextmenu event
Is a PointerEvent
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch