Element: contextmenu Ereignis

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

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

Jedes Rechtsklick-Ereignis, das nicht deaktiviert wurde (durch Aufrufen der Methode preventDefault() des Klick-Ereignisses), führt dazu, dass ein contextmenu Ereignis am 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ü ohne Auslösen eines contextmenu Ereignisses angezeigt.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder legen Sie eine Event-Handler-Eigenschaft fest.

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, und dies ist immer noch der Typ, der in Firefox und Safari übergeben wird.

Ereignis-Eigenschaften

Diese Schnittstelle erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Nur lesbar Experimentell: Repräsentiert den Winkel zwischen der Achse eines Wandlers (einem Zeiger oder Stift) und der X-Y-Ebene eines Gerätedisplays.
PointerEvent.azimuthAngle Nur lesbar Experimentell: Repräsentiert den Winkel zwischen der Y-Z-Ebene und der Ebene, die sowohl die Achse des Wandlers (einem Zeiger oder Stift) als auch die Y-Achse enthält.
PointerEvent.pointerId Nur lesbar: Eine eindeutige Kennung für den Zeiger, der das Ereignis verursacht.
PointerEvent.width Nur lesbar: Die Breite (Größe auf der X-Achse), in CSS-Pixeln, der Kontaktgeometrie des Zeigers.
PointerEvent.height Nur lesbar: Die Höhe (Größe auf der Y-Achse), in CSS-Pixeln, der Kontaktgeometrie des Zeigers.
PointerEvent.pressure Nur lesbar: Der normalisierte Druck der Zeigereingabe im Bereich von 0 bis 1, wobei 0 und 1 den minimalen und maximalen Druck darstellen, den die Hardware zu erkennen vermag.
PointerEvent.tangentialPressure Nur lesbar: Der normalisierte tangentiale Druck der Zeigereingabe (auch bekannt als Fassdruck oder Zylinderbelastung) im Bereich von -1 bis 1, wobei 0 die neutrale Position der Steuerung darstellt.
PointerEvent.tiltX Nur lesbar: Der Planwinkel (in Grad, im Bereich von -90 bis 90) zwischen der Y–Z-Ebene und der Ebene, die sowohl die Achse des Zeigers (z.B. Stift) als auch die Y-Achse enthält.
PointerEvent.tiltY Nur lesbar: Der Planwinkel (in Grad, im Bereich von -90 bis 90) zwischen der X–Z-Ebene und der Ebene, die sowohl die Achse des Zeigers (z.B. Stift) als auch die X-Achse enthält.
PointerEvent.twist Nur lesbar: Die Drehung des Zeigers (z.B. Stift) im Uhrzeigersinn um seine Hauptachse in Grad, mit einem Wert im Bereich von 0 bis 359.
PointerEvent.pointerType Nur lesbar: Zeigt den Gerätetyp an, der das Ereignis verursacht hat (Maus, Stift, Berührung usw.).
PointerEvent.isPrimary Nur lesbar: 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. Infolgedessen wird beim Rechtsklick auf den ersten Absatz nichts passieren, während der zweite Absatz das standardmäßige Kontextmenü Ihres Browsers anzeigt.

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