Den touch-actionegendom i CSS ger dig kontroll över effekten av pekskärmen interaktioner med ett element, som liknar den mer utbredda pointer-eventsegendom som används för att styra mus interaktioner.
#element ( touch-action: pan-right pinch-zoom; )Den touch-actionegenskap är användbar främst för interaktiva gränssnittselement som behöver något annorlunda beteende beroende på den typ av anordning som används. När dina användare kan förvänta sig att ett element ska bete sig på ett visst sätt med en mus och något annat beteende på en pekskärm, touch-actionkommer det att vara till nytta.
Det mest uppenbara exemplet på detta är ett interaktivt kartelement. Om du någonsin har tittat på en karta som inte är utformad för att fungera med beröringsenheter har du förmodligen försökt att nypa och zooma bara för att hitta webbläsaren som förstorar elementet, men inte faktiskt zooma på den faktiska kartan.
Som standard kommer en webbläsare att hantera pekinteraktioner automatiskt: Nyp för att zooma, svep för att bläddra osv. Om du ställer in touch-actionför noneatt inaktivera all webbläsarhantering av dessa händelser och lämna dem upp till dig att implementera (via JavaScript). Om du bara vill ta över en interaktion, ber du webbläsaren att hantera resten. Till exempel, om du skrev några JavaScript som endast hanterar zoomning, kan du tala om för webbläsaren att hantera allt annat med denna egenskap: touch-action: pan-x pan-y;.
Se Pennaxemplen på touch-action av CSS-Tricks (@ css-tricks) på CodePen.
Syntax
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationVärden
Den touch-actionfastighet accepterar följande värden:
auto: Tillåter webbläsaren att hantera alla panorerings- och zoominteraktioner.none: Inaktiverar webbläsare från att hantera alla interaktioner med panorering och zoom. Detta öppnar möjligheten att anpassa dessa interaktioner i JavaScript.pan-x: Aktiverar horisontell panorering med en enda fingerinteraktion. Det är en förkortning förpan-leftochpan-rightvärden, men kan användas i kombination medpan-y,pan-up,pan-downochpinch-zoom.pan-yAktiverar vertikal panorering med en enda fingerinteraktion. Det är en förkortning förpan-upochpan-downvärden, men kan användas i kombination medpan-x,pan-left,pan-rightochpinch-zoom.manipulation: Aktiverar nypa och zooma interaktioner, men inaktiverar andra som du kan hitta på vissa enheter, som dubbeltryck för att zooma. Det är stenografi för kombinationen avpan-x pan-y pinch-zoom.pan-left(Experimentellt): Aktiverar en enda fingerinteraktion när en användares finger rör sig åt höger, som panorerar åt vänster.pan-right(Experimentellt): Aktiverar en enda fingerinteraktion när en användares finger rör sig åt vänster, som panorerar mot höger.pan-down(Experimentell): Aktiverar en enda fingerinteraktion när en användares finger rör sig uppåt, vilket pannar nedåt.pan-up(Experimentellt): Aktiverar en enda fingerinteraktion när en användares finger rör sig nedåt, vilket pannar uppåt.pinch-zoom: Aktiverar interaktion med flera fingrar och kan kombineras med vilket annatpan-värde som helst .
Relaterad
pointer-events
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Nej |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 13.0-13.1 |
Safari är den uppenbara försummelsen av touch-action-stöd. iOs Safari har begränsat stöd, endast för autooch manipulationvärdena.
ytterligare information
- Pekarehändelser Nivå 2 Specifikation - Specifikationen finns för närvarande i kandidatrekommendation men är avsedd att flytta till föreslagen rekommendation i början av 2019, när detta skrivs. Avsikten är att dokumentet blir en officiell W3C-rekommendation.
- MDN-dokumentation
- Touch-action nypa-zoom CSS-egendom Exempel - Google Chrome demonstration av dess implementering.
- WebKit Bugzilla Ticket # 133112 - Öppna biljett för att föreslå Safari-support. Lägg till din röst för att stöta upp den.