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-actionverhindert, 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.altitudeAngleSchreibgeschützt Experimentell-
Stellt den Winkel zwischen der Achse eines Wandlers (einem Zeiger oder Stylus) und der X-Y-Ebene eines Gerätebildschirms dar.
PointerEvent.azimuthAngleSchreibgeschü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.persistentDeviceIdSchreibgeschützt Experimentell-
Eine eindeutige Kennung für das Zeigegerät, das das
PointerEventerzeugt. PointerEvent.pointerIdSchreibgeschützt-
Eine eindeutige Kennung für den Zeiger, der das Ereignis verursacht.
PointerEvent.widthSchreibgeschützt-
Die Breite (Magnitude auf der X-Achse) der Kontaktgeometrie des Zeigers in CSS-Pixeln.
PointerEvent.heightSchreibgeschützt-
Die Höhe (Magnitude auf der Y-Achse) der Kontaktgeometrie des Zeigers in CSS-Pixeln.
PointerEvent.pressureSchreibgeschützt-
Der normalisierte Druck der Zeigereingabe im Bereich von
0bis1, wobei0und1den minimalen und maximalen Druck darstellen, den die Hardware erkennen kann. PointerEvent.tangentialPressureSchreibgeschützt-
Der normalisierte tangentiale Druck der Zeigereingabe (auch bekannt als Barrel Pressure oder Zylinderstress) im Bereich von
-1bis1, wobei0die neutrale Position der Steuerung darstellt. PointerEvent.tiltXSchreibgeschützt-
Der Winkel in der Ebene (in Grad, im Bereich von
-90bis90) 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.tiltYSchreibgeschützt-
Der Winkel in der Ebene (in Grad, im Bereich von
-90bis90) 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.twistSchreibgeschützt-
Die Drehung im Uhrzeigersinn des Zeigers (z.B. Pen Stylus) um seine Hauptachse in Grad, mit einem Wert im Bereich von
0bis359. PointerEvent.pointerTypeSchreibgeschützt-
Gibt den Gerätetyp an, der das Ereignis verursacht hat (Maus, Stift, Berührung, etc.).
PointerEvent.isPrimarySchreibgeschü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…