Element: contextmenu Ereignis

Das contextmenu Ereignis wird ausgelöst, wenn der Benutzer versucht, ein Kontextmenü zu öffnen. Dieses Ereignis wird typischerweise durch Klicken 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, dann wird das Kontextmenü unten links in der aktuellen Zeile angezeigt.

Jedes Rechtsklick-Ereignis, das nicht deaktiviert ist (durch Aufrufen der preventDefault() Methode des Klick-Ereignisses), führt dazu, dass ein contextmenu Ereignis beim 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 Ereignishandlereigenschaft.

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 übermittelt wird.

Ereigniseigenschaften

Diese Schnittstelle erbt Eigenschaften von MouseEvent und Event.

PointerEvent.altitudeAngle Schreibgeschützt Experimentell: Stellt den Winkel zwischen einer Transducer-Achse (ein Zeiger oder Stift) und der X-Y-Ebene eines Geräteschirms dar.
PointerEvent.azimuthAngle Schreibgeschützt Experimentell: Stellt den Winkel zwischen der Y-Z-Ebene und der Ebene dar, die sowohl die Transducer-Achse (ein 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 (Größe auf der X-Achse) in CSS-Pixeln der Kontaktgeometrie des Zeigers.
PointerEvent.height Schreibgeschützt: Die Höhe (Größe 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 Zylinderstress) im Bereich von -1 bis 1, wobei 0 die neutrale Position der Steuerung ist.
PointerEvent.tiltX Schreibgeschützt: Der Flächenwinkel (in Grad, im Bereich von -90 bis 90) zwischen der Y–Z-Ebene und der Ebene, die sowohl die Zeigerachse (z. B. Stift) als auch die Y-Achse enthält.
PointerEvent.tiltY Schreibgeschützt: Der Flächenwinkel (in Grad, im Bereich von -90 bis 90) zwischen der X–Z-Ebene und der Ebene, die sowohl die Zeigerachse (z. B. Stift) als auch die X-Achse enthält.
PointerEvent.twist Schreibgeschützt: Die Drehung des Zeigers (z. B. Stift) um seine Hauptachse im Uhrzeigersinn 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, 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 durch preventDefault() abgebrochen, wenn das contextmenu Ereignis beim ersten Absatz ausgelöst wird. Infolgedessen wird der erste Absatz nichts tun, wenn mit der rechten Maustaste darauf geklickt wird, während der zweite Absatz das standardmäßige Kontextmenü Ihres Browsers anzeigt.

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