Element: pointercancel-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.
Das pointercancel-Ereignis wird ausgelöst, wenn der Browser feststellt, dass voraussichtlich keine weiteren Pointer-Ereignisse auftreten werden, oder wenn der Pointer nach dem Auslösen des pointerdown-Ereignisses zum Verschieben, Zoomen oder Scrollen des Viewports verwendet wird.
Beispiele für Situationen, die ein pointercancel-Ereignis auslösen:
- Ein Hardware-Ereignis bricht die Pointer-Aktivitäten ab. Das kann beispielsweise der Fall sein, wenn die Person über eine Oberfläche zum Wechseln zwischen Anwendungen oder mit der „Home“-Taste eines Mobilgeräts zu einer anderen Anwendung wechselt.
- Die Bildschirmausrichtung des Geräts ändert sich, während der Pointer aktiv ist.
- Der Browser stellt fest, dass die Pointer-Eingabe versehentlich begonnen wurde. Dies kann beispielsweise passieren, wenn die Hardware eine Handballenerkennung unterstützt, damit eine auf dem Display aufliegende Hand bei der Verwendung eines Eingabestifts nicht versehentlich Ereignisse auslöst.
- Die CSS-Eigenschaft
touch-actionverhindert, dass die Eingabe fortgesetzt wird. - Wenn eine Person mit zu vielen Pointern gleichzeitig interagiert, kann der Browser dieses Ereignis für alle vorhandenen Pointer auslösen (auch wenn die Person den Bildschirm weiterhin berührt).
Hinweis:
Nach dem Auslösen des pointercancel-Ereignisses sendet der Browser außerdem pointerout, gefolgt von pointerleave.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("pointercancel", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onpointercancel = (event) => { }
Ereignistyp
Ein PointerEvent. Erbt von Event.
Beispiele
Verwendung von addEventListener():
const para = document.querySelector("p");
para.addEventListener("pointercancel", (event) => {
console.log("Pointer event canceled");
});
Verwendung der Event-Handler-Eigenschaft onpointercancel (beachten Sie jedoch, dass dadurch andere gegebenenfalls über onpointercancel hinzugefügte Event-Listener ersetzt werden):
const para = document.querySelector("p");
para.onpointercancel = (event) => {
console.log("Pointer event canceled");
};
Spezifikationen
| Spezifikation |
|---|
| Pointer Events # pointercancel |
| Pointer Events # dom-globaleventhandlers-onpointercancel |