Den touch-actionejendom i CSS giver dig kontrol over effekten af touchscreen interaktioner med et element, der ligner den mere udbredte pointer-eventsejendom, der anvendes til kontrol mus interaktioner.
#element ( touch-action: pan-right pinch-zoom; )Den touch-actionegenskab er nyttig primært til interaktive UI elementer, der kræver lidt anderledes adfærd, afhængigt af typen af anordning, der anvendes. Når dine brugere kan forvente, at et element opfører sig på en bestemt måde med en mus, og en lidt anden adfærd på en berøringsskærm, touch-actionvil det være nyttigt.
Det mest oplagte eksempel på dette er et interaktivt kortelement. Hvis du nogensinde har set et kort, der ikke er designet til at fungere med berøringsenheder, har du sandsynligvis kun prøvet at klemme og zoome for at finde browseren, der forstørrer elementet, men ikke faktisk zoomer det faktiske kort.
Som standard vil en browser håndtere berøringsinteraktioner automatisk: Klem for at zoome, stryg for at rulle osv. Hvis touch-actiondu indstiller til none, deaktiveres al browserhåndtering af disse begivenheder og overlader dem til dig at implementere (via JavaScript). Hvis du kun vil overtage en interaktion, skal du bede browseren om at håndtere resten. For eksempel, hvis du skrev nogle JavaScript, der kun håndtag zoom, kan du fortælle browseren til håndtaget alt andet med denne egenskab: touch-action: pan-x pan-y;.
Se eksemplerne på pennen med touch-action fra CSS-Tricks (@ css-tricks) på CodePen.
Syntaks
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationVærdier
Den touch-actionejendom accepterer følgende værdier:
auto: Tillader browseren at håndtere alle interaktioner mellem panorering og zoom.none: Deaktiverer browsere fra at håndtere alle interaktioner mellem panorering og zoom. Dette åbner muligheden for at tilpasse disse interaktioner i JavaScript.pan-x: Aktiverer vandret panorering med en enkelt finger-interaktion. Det er forkortelse forpan-leftogpan-rightværdier, men kan anvendes i kombination medpan-y,pan-up,pan-downogpinch-zoom.pan-yAktiverer lodret panorering med en enkelt finger-interaktion. Det er forkortelse forpan-upogpan-downværdier, men kan anvendes i kombination medpan-x,pan-left,pan-rightogpinch-zoom.manipulation: Aktiverer klemme- og zoom-interaktioner, men deaktiverer andre, som du måske finder på nogle enheder, f.eks. Dobbeltklik for at zoome. Det er stenografi for kombinationen afpan-x pan-y pinch-zoom.pan-left(Eksperimentel): Aktiverer en enkelt fingerinteraktion, når en brugers finger bevæger sig til højre, som pander mod venstre.pan-right(Eksperimentel): Aktiverer en enkelt fingerinteraktion, når en brugers finger bevæger sig til venstre, som pander mod højre.pan-down(Eksperimentel): Aktiverer en enkelt fingerinteraktion, når en brugers finger bevæger sig opad, som pander nedad.pan-up(Eksperimentel): Aktiverer en enkelt fingerinteraktion, når en brugers finger bevæger sig nedad, som pander opad.pinch-zoom: Aktiverer interaktion med flere fingre og kan kombineres med en hvilken som helst andenpan-værdi.
Relaterede
pointer-events
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Ingen |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 13.0-13.1 |
Safari er den åbenlyse undladelse af touch-action support. iOs Safari har begrænset support, kun for autoog manipulationværdier.
Yderligere Information
- Pointer Events niveau 2 Specifikation - Specifikationen er i øjeblikket i kandidatanbefaling, men er beregnet til at flytte til foreslået anbefaling tidligt i 2019, fra dette tidspunkt. Hensigten er, at dokumentet bliver en officiel W3C-anbefaling.
- MDN-dokumentation
- Touch-action klem-zoom CSS-egenskab Prøve - Google Chrome's demo af dens implementering.
- WebKit Bugzilla Ticket # 133112 - Åbn billet for at foreslå Safari-support. Tilføj din stemme for at støde op.