Element: pointercancel Event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2020.
Das pointercancel
-Ereignis wird ausgelöst, wenn der Browser feststellt, dass es wahrscheinlich keine weiteren Pointer-Ereignisse geben wird, oder wenn nach dem pointerdown
-Ereignis der Zeiger verwendet wird, um den Viewport durch Verschieben, Zoomen oder Scrollen zu manipulieren.
Einige Beispiele für Situationen, die ein pointercancel
-Ereignis auslösen:
- Ein Hardware-Ereignis tritt auf, das die Zeigeraktivitäten abbricht. Dies kann zum Beispiel passieren, wenn der Benutzer die Anwendung über eine App-Switcher-Oberfläche oder die "Home"-Taste auf einem Mobilgerät wechselt.
- Die Bildschirmorientierung des Geräts wird geändert, während der Zeiger aktiv ist.
- Der Browser entscheidet, dass der Benutzer die Eingabe versehentlich gestartet hat. Dies kann geschehen, wenn die Hardware Handflächenablehnung unterstützt, um zu verhindern, dass eine Hand auf dem Display ruht, während ein Stylus verwendet wird, und versehentlich Ereignisse auslöst.
- Die CSS-Eigenschaft
touch-action
verhindert, dass die Eingabe fortgesetzt wird. - Wenn der Benutzer mit zu vielen gleichzeitigen Zeigern interagiert, kann der Browser dieses Ereignis für alle bestehenden Zeiger auslösen (selbst wenn der Benutzer weiterhin den Bildschirm berührt).
Hinweis:
Nachdem das pointercancel
-Ereignis ausgelöst wurde, sendet der Browser auch pointerout
gefolgt von pointerleave
.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("pointercancel", (event) => { })
onpointercancel = (event) => { }
Ereignistyp
Ein PointerEvent
. Erbt von Event
.
Ereigniseigenschaften
Diese Schnittstelle erbt Eigenschaften von MouseEvent
und Event
.
PointerEvent.altitudeAngle
Schreibgeschützt Experimentell-
Stellt den Winkel zwischen der Achse eines Wandlers (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 Achse des Wandlers (einem Zeiger oder Stylus) als auch die Y-Achse enthält.
PointerEvent.persistentDeviceId
Schreibgeschützt Experimentell-
Eine eindeutige Kennung für das Zeigegerät, das das
PointerEvent
erzeugt. 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) der Kontaktgeometrie des Zeigers in CSS-Pixeln.
PointerEvent.height
Schreibgeschützt-
Die Höhe (Magnitude auf der Y-Achse) der Kontaktgeometrie des Zeigers in CSS-Pixeln.
PointerEvent.pressure
Schreibgeschützt-
Der normalisierte Druck der Zeigereingabe im Bereich von
0
bis1
, wobei0
und1
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 Pressure oder Zylinderstress) im Bereich von
-1
bis1
, wobei0
die neutrale Position der Steuerung darstellt. PointerEvent.tiltX
Schreibgeschützt-
Der Winkel in der Ebene (in Grad, im Bereich von
-90
bis90
) zwischen der Y-Z-Ebene und der Ebene, die sowohl die Achse des Zeigers (z.B. Pen Stylus) als auch die Y-Achse enthält. PointerEvent.tiltY
Schreibgeschützt-
Der Winkel in der Ebene (in Grad, im Bereich von
-90
bis90
) zwischen der X-Z-Ebene und der Ebene, die sowohl die Achse des Zeigers (z.B. Pen Stylus) als auch die X-Achse enthält. PointerEvent.twist
Schreibgeschützt-
Die Drehung im Uhrzeigersinn des Zeigers (z.B. Pen Stylus) um seine Hauptachse in Grad, mit einem Wert im Bereich von
0
bis359
. PointerEvent.pointerType
Schreibgeschützt-
Gibt den Gerätetyp an, der das Ereignis verursacht hat (Maus, Stift, Berührung, etc.).
PointerEvent.isPrimary
Schreibgeschützt-
Gibt an, ob der Zeiger den primären Zeiger dieses Zeigertyps darstellt.
Beispiele
Verwendung von addEventListener()
:
const para = document.querySelector("p");
para.addEventListener("pointercancel", (event) => {
console.log("Pointer event cancelled");
});
Verwendung der onpointercancel
Event-Handler-Eigenschaft:
const para = document.querySelector("p");
para.onpointercancel = (event) => {
console.log("Pointer event cancelled");
};
Spezifikationen
Specification |
---|
Pointer Events # the-pointercancel-event |
Pointer Events # dom-globaleventhandlers-onpointercancel |
Browser-Kompatibilität
Loading…