A touch-actionCSS tulajdonság lehetővé teszi az pointer-eventsegérrel történő érintőképernyős interakciók hatásának vezérlését, hasonlóan az egér interakcióinak vezérléséhez használt, szélesebb körben használt tulajdonsághoz.
#element ( touch-action: pan-right pinch-zoom; )A touch-actiontulajdonság elsősorban olyan interaktív felhasználói felület elemeihez hasznos, amelyek a használt eszköz típusától függően kissé eltérő viselkedést igényelnek. Amikor a felhasználók arra számíthatnak, hogy egy elem egy egérrel meghatározott módon viselkedik, és az érintőképernyőn kissé eltérően viselkednek, touch-actionakkor jól jön.
Ennek legkézenfekvőbb példája egy interaktív térképelem. Ha valaha olyan térképet nézett meg, amelyet nem úgy terveztek, hogy érintőkészülékekkel működjön, akkor valószínűleg csak azért próbálkozott megcsípni és nagyítani, hogy megtalálja a böngésző nagyítását, de valójában nem a tényleges térképet.
Alapértelmezésben egy böngésző kezeli érintés kölcsönhatások automatikusan: Pinch zoom, ellop, hogy lépjünk, stb beállítás touch-action, hogy noneletiltja az összes böngésző kezelése ezeket az eseményeket, így őket rajtad múlik, hogy végre (JavaScript segítségével). Ha csak egy interakciót akar átvenni, mondja meg a böngészőnek, hogy a többit kezelje. Például, ha te írtad néhány JavaScript, hogy csak rendezi nagyítás, akkor lehet mondani a böngésző fogantyú minden mást ezzel a tulajdonsággal: touch-action: pan-x pan-y;.
Lásd a CSS-Tricks (@ css-tricks) érintéssel történő tollal kapcsolatos példáit a CodePen-en.
Szintaxis
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationÉrtékek
A touch-actionszálláshely a következő értékeket fogadja el:
auto: Lehetővé teszi a böngésző számára az összes pásztázási és nagyítási interakció kezelését.none: Letiltja a böngészőktől az összes pásztázási és nagyítási interakció kezelését. Ez megnyitja a lehetőséget az interakciók egyedi definiálására a JavaScript-ben.pan-x: Engedélyezi a vízszintes pásztázást egyetlen ujjal. Ez a rövidítés apan-leftéspan-rightértékeket, de lehet használni együttpan-y,pan-up,pan-downéspinch-zoom.pan-yEngedélyezi a függőleges pásztázást egyetlen ujjal. Ez a rövidítés apan-upéspan-downértékeket, de lehet használni együttpan-x,pan-left,pan-rightéspinch-zoom.manipulation: Engedélyezi a csipegetést és a nagyítást, de letiltja azokat, amelyeket egyes eszközökön megtalálhat, például duplán koppintson a nagyításhoz. Gyorsírás a kombinációhozpan-x pan-y pinch-zoom.pan-left(Kísérleti): Lehetővé teszi az egyetlen ujjal történő interakciót, amikor a felhasználó ujja jobbra mozog, ami balra dől.pan-right(Kísérleti): Lehetővé teszi az egyetlen ujjal történő interakciót, amikor a felhasználó ujja balra mozog, amely jobb felé mozog.pan-down(Kísérleti): Egyetlen ujjal történő interakciót tesz lehetővé, amikor a felhasználó ujja felfelé mozog, ami lefelé húzódik.pan-up(Kísérleti): Lehetővé teszi az egyetlen ujjal történő interakciót, amikor a felhasználó ujja lefelé mozog, ami felfelé pörög.pinch-zoom: Engedélyezi a többujjas interakciókat, és bármilyen máspan-értékkel kombinálható .
Összefüggő
pointer-events
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12. | Nem |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 13.0-13.1 |
A Safari az érintéses műveletek támogatásának kirívó kihagyása. Az iOs Safari korlátozott támogatást nyújt, csak a autoés manipulationértékek számára.
további információ
- Mutatóesemények 2. szintű specifikáció - A specifikáció jelenleg a Jelöltajánlóban található, de ennek a cikknek a kezdetéig 2019 elején kívánja áttérni a Javasolt Javaslatra. A szándék az, hogy a dokumentum hivatalos W3C-ajánlássá váljon.
- MDN dokumentáció
- Touch-action csipet-nagyítás CSS tulajdonságminta - a Google Chrome bemutatója annak megvalósításáról.
- WebKit Bugzilla Ticket # 133112 - Nyitott jegy a Safari támogatására. Adja hozzá a szavazatát, hogy feldobja.