touch-actionVara CSS annab teile üle mõju puuteekraanid elemendiga, mis sarnaneb rohkem levinud pointer-eventsvara kasutatakse kontrolli hiire koostoimeid.
#element ( touch-action: pan-right pinch-zoom; )touch-actionVara on kasulik peamiselt interaktiivse kasutajaliidese elemendid, mis vajavad veidi erinev käitumine sõltuvalt seadme tüübist kasutatakse. Kui teie kasutajad võivad eeldada, et element käitub hiirega teatud viisil ja puutetundlikul ekraanil veidi erinev käitumine, touch-actionon see kasulik.
Selle ilmekaim näide on interaktiivne kaardielement. Kui olete kunagi vaadanud kaarti, mis pole mõeldud puutetundlike seadmetega töötamiseks, olete tõenäoliselt proovinud näpistada ja suumida ainult selleks, et leida brauserit elementi suurendavana, kuid tegelikult mitte suuminud tegelikku kaarti.
Vaikimisi brauser hakkama puutetoimingutele automaatselt: Näputäis suurendamiseks, pühkige kerimine jne Setting touch-actionet nonekeelatakse kõik brauseri käitlemise neist sündmustest, jättes neile sinust rakendada (via JavaScript). Kui soovite üle võtta ainult ühe suhtluse, paluge brauseril ülejäänud asjadega hakkama saada. Näiteks, kui sa kirjutasid mõned JavaScript, et ainult käepidemed suum, saab öelda, et brauser käepide kõike muud koos seda vara: touch-action: pan-x pan-y;.
Vaadake CodePenil CSS-Tricksi (@ css-tricks) puutetundliku pliiatsi näiteid.
Süntaks
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationVäärtused
touch-actionVara saab kasutada järgmisi väärtusi:
auto: Võimaldab brauseril käsitseda kõiki panoraam- ja suumitoiminguid.none: Keelab brauseritel kõigi panoraam- ja suumitoimingute haldamise. See avab võimaluse neid interaktsioone JavaScripti kohandatud määratleda.pan-x: Lubab horisontaalse panoraamimise ühe sõrmega. On lühendvorminapan-leftjapan-rightväärtusi, kuid võib kasutada ka kombinatsioonispan-y,pan-up,pan-downjapinch-zoom.pan-yVõimaldab vertikaalset panoraamimist ühe sõrmega. On lühendvorminapan-upjapan-downväärtusi, kuid võib kasutada ka kombinatsioonispan-x,pan-left,pan-rightjapinch-zoom.manipulation: Lubab näpistamise ja suumimise interaktsioone, kuid keelab teised, mida võite mõnes seadmes leida, näiteks topeltpuudutage suumimiseks. See on lühike kombinatsioonpan-x pan-y pinch-zoom.pan-left(Eksperimentaalne): lubab ühe sõrmega suhtlemise, kui kasutaja sõrm liigub paremale, mis paneb vasakule poole.pan-right(Eksperimentaalne): lubab ühe sõrmega suhtlemise, kui kasutaja sõrm liigub vasakule, mis paneb paremale.pan-down(Eksperimentaalne): lubab ühe sõrmega suhtlemise, kui kasutaja sõrm liigub ülespoole, mis paneb allapoole.pan-up(Eksperimentaalne): lubab ühe sõrmega suhtlemise, kui kasutaja sõrm liigub allapoole, mis paneb ülespoole.pinch-zoom: Lubab mitme sõrmega suhtlemist ja seda saab kombineerida mis tahes muupan-väärtusega.
Seotud
pointer-events
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Ei |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | 13.0-13.1 |
Safari on silmatorkav tegevusetus puutetundliku tegevuse toetamisel. iOs Safaril on piiratud tugi, ainult väärtustele autoja manipulation.
Lisainformatsioon
- Kursoriürituste 2. taseme spetsifikatsioon - spetsifikatsioon on praegu kandidaatide soovituses, kuid selle kirjutamise hetkest kavatsetakse liikuda kavandatud soovituse juurde 2019. aasta alguses. Eesmärk on, et dokumendist saaks ametlik W3C soovitus.
- MDN dokumentatsioon
- CSS-i atribuudi puutetundlik näputäis-suum näide - Google Chrome'i demo selle rakendamisest.
- WebKit Bugzilla pilet nr 133112 - avatud pilet Safari toe pakkumiseks. Selle parandamiseks lisage oma hääl.