Forstå Touch- og Pointer-Hændelser på Mobiler

I en verden domineret af smartphones som iPhone og Android-enheder er skærminteraktion kernen i vores digitale oplevelse. Hver eneste swipe, tap og knib er resultatet af komplekse processer, der foregår under overfladen. For at skabe virkelig intuitive og responsive apps og websteder er det afgørende at forstå de mekanismer, der driver disse interaktioner. Denne artikel vil dykke ned i to fundamentale koncepter: Touch-hændelser og Pointer-hændelser, og hvordan de arbejder sammen for at levere den sømløse brugeroplevelse, vi forventer af vores mobile enheder.

Uanset om du er en app-udvikler, en webdesigner, eller blot en nysgerrig bruger, vil en indsigt i disse hændelsestyper give dig en dybere forståelse af, hvordan din telefon og dens applikationer reagerer på dine fingres bevægelser. Vi vil udforske, hvad en touch-hændelse er, hvad en pointercancel-hændelse indebærer, og hvordan CSS-egenskaben touch-action spiller en central rolle i at forme interaktionen mellem brugeren, browseren og applikationen.

Hvad er Touch-hændelser?

Touch-hændelser er den ældre, men stadig relevante, måde at håndtere berøringsinput på webbet. Når din finger eller en stylus rører skærmen på din smartphone, udløses en række hændelser, som JavaScript kan opfange og reagere på. Disse hændelser giver udviklere detaljeret information om, hvor og hvordan berøringen finder sted.

TouchEvent-objektet

Kernen i touch-hændelsessystemet er TouchEvent-objektet. Dette objekt indeholder al den nødvendige information om den berøring, der har fundet sted. En af de vigtigste egenskaber ved TouchEvent er touches. Denne egenskab returnerer en TouchList, som er en liste over Touch-objekter, der aktuelt er i kontakt med overfladen. Hvert Touch-objekt repræsenterer et enkelt kontaktpunkt og indeholder data som koordinater (clientX, clientY, pageX, pageY), den unikt identificerende identifier, og det element, berøringen startede på (target).

Udover touches findes der også targetTouches, som er en liste over Touch-objekter, der startede på det aktuelle element, som hændelseslytteren er knyttet til, og changedTouches, som er en liste over Touch-objekter, der er ændret siden den sidste hændelse (f.eks. nye berøringer, der er tilføjet, eller eksisterende, der er fjernet).

Typer af Touch-hændelser

• touchstart: Udløses, når et eller flere berøringspunkter placeres på overfladen.
• touchmove: Udløses, når et eller flere berøringspunkter flyttes hen over overfladen. Dette kan udløses mange gange i sekundet.
• touchend: Udløses, når et eller flere berøringspunkter fjernes fra overfladen.
• touchcancel: Udløses, når en berøring afbrydes af browseren eller operativsystemet, f.eks. når brugeren bevæger fingeren uden for dokumentet, eller når browseren beslutter at håndtere bevægelsen som en indbygget browsergestus (f.eks. rulning eller zoom).

For at forhindre browserens standardadfærd (f.eks. rulning, når du swiper på et område, hvor din app skal håndtere en gestus), bruger udviklere ofte event.preventDefault() inde i deres touch-hændelseslyttere. Dette fortæller browseren, at applikationen selv vil håndtere berøringen.

Introduktion til Pointer-hændelser

Pointer-hændelser repræsenterer en nyere og mere forenet tilgang til inputhåndtering på webbet. I stedet for at have separate hændelsessystemer for mus, pen og touch, samler Pointer-hændelserne alle disse inputtyper under én paraply. Dette forenkler udvikling og skaber mere robust kode, da du kan skrive én kodebase, der fungerer på tværs af forskellige inputenheder.

Denne funktion er velkendt og fungerer på tværs af mange enheder og browserversioner. Den har været tilgængelig i browsere siden september 2019, hvilket gør den til en pålidelig standard for moderne webudvikling.

Typer af Pointer-hændelser

Pointer-hændelser har et lignende sæt af hændelsestyper som mus- og touch-hændelser, men med pointer-præfikset:

• pointerdown: Tilsvarende touchstart eller mousedown.
• pointermove: Tilsvarende touchmove eller mousemove.
• pointerup: Tilsvarende touchend eller mouseup.
• pointercancel: Tilsvarende touchcancel, men med en mere specifik årsag.
• Og mange flere, såsom pointerover, pointerout, pointerenter, pointerleave, gotpointercapture, lostpointercapture.

Hvert PointerEvent-objekt indeholder også en pointerType-egenskab, som fortæller dig, om inputtet kom fra en mus, pen eller touch, hvilket giver udviklere mulighed for at tilpasse adfærd baseret på inputtypen, hvis det er nødvendigt.

Dybdegående om pointercancel-hændelsen og touch-action

Den mest kritiske og ofte misforståede del af Pointer-hændelsessystemet, især i forbindelse med touch, er samspillet mellem pointercancel-hændelsen og CSS-egenskaben touch-action. Dette er nøglen til at skabe en flydende og responsiv brugeroplevelse, hvor både applikationen og browseren kan håndtere berøringsinteraktioner effektivt.

Hvad udløser en pointercancel-hændelse?

En pointercancel-hændelse udløses, når browseren beslutter at overtage håndteringen af en berøringsgestus. Som standard håndterer browseren visse gestus eksklusivt, såsom rulning (panning) og knib-til-zoom (pinching). Hvis din applikation begynder at behandle en berøringssekvens, men browseren genkender denne sekvens som en af dens indbyggede gestus, vil browseren afbryde applikationens håndtering ved at sende en pointercancel-hændelse. Dette signalerer, at browseren nu har taget kontrol over gestussen.

Forestil dig, at du forsøger at implementere din egen brugerdefinerede rulning eller zoom på et element. Hvis du kun lytter til pointermove-hændelser, vil browseren sandsynligvis gribe ind og begynde at rulle siden, før din kode får en chance for at reagere. Dette resulterer i en dårlig brugeroplevelse, hvor interaktionen føles hakkende eller uforudsigelig.

Rollen af touch-action CSS-egenskaben

Her kommer touch-action CSS-egenskaben ind i billedet. Denne egenskab giver dig mulighed for at specificere, hvordan et elements region kan manipuleres af en touchskærmbruger. Ved eksplicit at angive, hvilke gestus der skal håndteres af browseren, kan din applikation levere sin egen adfærd i pointermove- og pointerup-lyttere for de resterende gestus.

touch-action adskiller sig fra event.preventDefault() ved, at den er deklarativ. Mens preventDefault() er en reaktiv handling (du stopper browserens adfærd *efter* hændelsen er udløst), fortæller touch-action browseren om din intention *før* en hændelse overhovedet er blevet behandlet. Dette er afgørende for ydeevnen, da browseren kan optimere sin egen gestus-håndtering og undgå forsinkelser.

Almindelige touch-action-værdier:

• auto: Standardværdien. Browseren bestemmer, hvilke gestus der skal håndteres.
• none: Ingen gestus håndteres af browseren. Applikationen håndterer alle berøringer. Brug dette med forsigtighed, da det kan forhindre standardrulning og zoom, hvilket kan ødelægge brugervenligheden, hvis det ikke implementeres korrekt af applikationen.
• pan-x: Tillader browseren at rulle vandret.
• pan-y: Tillader browseren at rulle lodret.
• pinch-zoom: Tillader browseren at håndtere knib-til-zoom.
• manipulation: En kombination af pan-x, pan-y og pinch-zoom, men forhindrer dobbelt-tap-zoom. Ideel til elementer, der har deres egen specialiserede gestus-håndtering, men stadig skal tillade browserens standardrulning og zoom.

Sådan fungerer touch-action-arv

Når en gestus startes, krydser browseren touch-action-værdierne for det berørte element og dets forfædre, op til det element, der implementerer gestussen (dvs. det første indeholdende rullende element). Det betyder, at i praksis anvendes touch-action typisk kun på top-level elementer, der har en eller anden brugerdefineret adfærd, uden at det er nødvendigt at specificere touch-action eksplicit på nogen af elementets efterkommere. Dette gør det nemt at definere adfærd for større interaktionsområder.

Sammenligning: Touch-hændelser vs. Pointer-hændelser

Selvom både Touch- og Pointer-hændelser tjener formålet at håndtere input fra berøringsfølsomme skærme, er der væsentlige forskelle, der gør Pointer-hændelser til den foretrukne løsning i de fleste moderne udviklingsscenarier. Her er en sammenlignende oversigt:

Mens Touch-hændelser stadig fungerer, er Pointer-hændelser den fremtidssikre løsning, der tilbyder en mere elegant og effektiv måde at håndtere alle former for input på.

Praktisk Anvendelse og Optimering

For udviklere er forståelsen af disse hændelsestyper afgørende for at skabe applikationer, der føles naturlige og responsive på mobile enheder. Her er nogle praktiske overvejelser:

• Brug touch-action: none; med omtanke: Hvis du implementerer en fuldstændig brugerdefineret interaktion, f.eks. et kort, der skal panoreres og zoomes med din egen logik, eller et tegnebræt, hvor du skal fange hver eneste fingerbevægelse, er touch-action: none; sandsynligvis nødvendigt. Men husk at give brugeren en alternativ måde at udføre de standardhandlinger, som browseren normalt ville håndtere (f.eks. en zoom-knap).
• Test på tværs af enheder: Selvom Pointer-hændelser er bredt understøttet, kan der stadig være små forskelle i implementering på tværs af forskellige browsere og operativsystemer (iOS, Android). Test altid dine interaktioner på virkelige enheder for at sikre den bedste brugeroplevelse.
• Ydeevne er nøglen: Især med touchmove og pointermove-hændelser, der udløses mange gange i sekundet, er det vigtigt at holde din hændelseslytterkode så let og effektiv som muligt for at undgå at blokere hovedtråden og forårsage hakken. Brug teknikker som debouncing eller throttling, hvis du udfører tunge beregninger.
• Overvej brugeroplevelsen: Design altid med brugeren i tankerne. Er gestussen intuitiv? Giver den god visuel feedback? En god touch-interaktion er ikke kun teknisk korrekt, men også behagelig at bruge.

Ofte Stillede Spørgsmål

Hvorfor får jeg en pointercancel-hændelse?

Du modtager en pointercancel-hændelse, fordi browseren har besluttet at overtage håndteringen af en aktiv berøringssekvens. Dette sker typisk, når browseren genkender bevægelsen som en af dens indbyggede gestus, såsom rulning af siden eller knib-til-zoom. For eksempel, hvis du har en pointermove-lytter til at tegne på et lærred, men din finger begynder at bevæge sig vertikalt på en måde, der ligner en almindelig rullebevægelse, kan browseren afbryde din tegning og begynde at rulle siden i stedet. For at forhindre dette og bevare kontrol over berøringen i din applikation, skal du bruge CSS-egenskaben touch-action.

Skal jeg bruge touch-action eller preventDefault()?

I de fleste moderne scenarier, især med Pointer-hændelser, bør du foretrække at bruge touch-action CSS-egenskaben. touch-action er deklarativ og giver browseren besked om dine intentioner på forhånd, hvilket muliggør bedre ydeevne og en mere flydende oplevelse, da browseren kan optimere sin egen gestus-håndtering. preventDefault() er en reaktiv løsning, der stopper browserens standardadfærd *efter* hændelsen er udløst, hvilket kan introducere små forsinkelser eller "jank". Brug preventDefault() i Touch-hændelseslyttere, hvis du arbejder med ældre kode eller i meget specifikke tilfælde, hvor du dynamisk skal beslutte at annullere en hændelse.

Hvilken type hændelse er bedst for min app?

For nye projekter anbefales det kraftigt at bruge Pointer-hændelser. De tilbyder en forenet API for alle inputtyper (mus, pen, touch), hvilket forenkler kodebasen og gør den mere robust. De arbejder også sømløst sammen med touch-action CSS-egenskaben for at give dig præcis kontrol over browserens adfærd. Touch-hændelser er stadig relevante for ældre systemer eller hvis du har meget specifikke, lavniveau krav til berøringshåndtering, men Pointer-hændelser er fremtiden for input på webbet.

Hvad er forskellen på touches og targetTouches i Touch-hændelser?

I et TouchEvent-objekt refererer touches til en TouchList af alleTouch-objekter, der aktuelt er i kontakt med overfladen, uanset hvor berøringen startede. Dette betyder, at hvis du har flere fingre på skærmen, vil touches indeholde information om alle disse fingre.

Derimod refererer targetTouches til en TouchList af Touch-objekter, hvis touchstart-hændelse oprindeligt skete på det element, som hændelseslytteren er knyttet til. Hvis du f.eks. har en hændelseslytter på en specifik knap, vil targetTouches kun inkludere berøringer, der startede på den knap, selvom andre fingre måske rører andre dele af skærmen.

Konklusion

At mestre touch- og pointer-hændelser er essentielt for enhver, der arbejder med mobile applikationer og websteder. Ved at forstå forskellen mellem Touch-hændelser og Pointer-hændelser, samt den kritiske rolle, touch-action-egenskaben og pointercancel-hændelsen spiller, kan udviklere skabe overlegne brugeroplevelser. Dette sikrer, at interaktioner på din iPhone eller Android-telefon ikke kun er funktionelle, men også utroligt intuitive og flydende.

Den fortsatte udvikling inden for webteknologier gør det nemmere end nogensinde at bygge komplekse, touch-baserede applikationer. Ved at udnytte de rigtige værktøjer og forstå de underliggende principper kan du låse op for det fulde potentiale af mobil interaktion og levere enestående brugervenlighed til dine brugere.

Hvis du vil læse andre artikler, der ligner Forstå Touch- og Pointer-Hændelser på Mobiler, kan du besøge kategorien Mobilteknologi.