touch-actionOmaisuus CSS auttaa hallitsemaan vaikutuksen kosketusnäyttö vuorovaikutus elementti, samankaltainen paremmin paljon käytettyihin pointer-eventskäytetty omaisuus Verrokkihiiri vuorovaikutuksia.
#element ( touch-action: pan-right pinch-zoom; )touch-actionOminaisuus on käyttökelpoinen ensisijaisesti interaktiivisia käyttöliittymän elementtejä, jotka on hieman eri tavalla riippuen siitä, minkä tyyppistä laitetta käytetään. Kun käyttäjät saattavat odottaa elementin käyttäytyvän tietyllä tavalla hiirellä, ja hieman erilainen käyttäytyminen kosketusnäytöllä, touch-actionon hyödyllistä.
Ilmeisin esimerkki tästä on interaktiivinen karttaelementti. Jos olet koskaan katsellut karttaa, jota ei ole suunniteltu toimimaan kosketuslaitteiden kanssa, olet todennäköisesti yrittänyt nipistää ja zoomata vain löytääksesi selaimen suurentavan elementtiä, mutta et tosiasiallisesti zoomaamalla todellista karttaa.
Oletuksena selaimen hoitaa kosketustoiminnot automaattisesti: Zoomaa nipistämällä, pyyhkäisemällä vierittää jne asetus touch-actionon nonepoistaa käytöstä kaikki selaimen käsittelevät näitä tapahtumia, jolloin ne jopa voit toteuttaa (via JavaScript). Jos haluat ottaa haltuunsa vain yhden vuorovaikutuksen, käske selainta hoitamaan loput. Jos esimerkiksi kirjoitit joitakin JavaScriptiä vain kahvat zoomaus, voit kertoa selaimen käsitellä kaikkea muuta tämän omaisuutta: touch-action: pan-x pan-y;.
Katso kynäesimerkkejä CSS-Tricksin (@ css-tricks) kosketustoiminnasta CodePenissä.
Syntaksi
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationArvot
touch-actionOminaisuuden hyväksyy seuraavat arvot:
auto: Antaa selaimen hallita kaikkia panorointi- ja zoomausvaikutuksia.none: Estää selaimet käsittelemästä kaikkia panorointi- ja zoomausvaikutuksia. Tämä avaa kyvyn mukauttaa näiden vuorovaikutusten määrittely JavaScriptissa.pan-x: Mahdollistaa vaakasuoran panoroinnin yhdellä sormella. Se on vain lyhennepan-leftjapan-rightarvot, mutta voidaan käyttää yhdistelmänäpan-y,pan-up,pan-downjapinch-zoom.pan-yMahdollistaa pystysuuntaisen panoroinnin yhdellä sormella. Se on vain lyhennepan-upjapan-downarvot, mutta voidaan käyttää yhdistelmänäpan-x,pan-left,pan-rightjapinch-zoom.manipulation: Mahdollistaa nipistämisen ja zoomauksen vuorovaikutuksen, mutta poistaa käytöstä muut, joita saatat löytää joillakin laitteilla, kuten zoomaus kaksoisnapauttamalla. Se on lyhenne yhdistelmällepan-x pan-y pinch-zoom.pan-left(Kokeellinen): Mahdollistaa yhden sormen vuorovaikutuksen, kun käyttäjän sormi liikkuu oikealle, joka siirtyy vasemmalle.pan-right(Kokeellinen): Mahdollistaa yhden sormen vuorovaikutuksen, kun käyttäjän sormi liikkuu vasemmalle, mikä siirtyy oikealle.pan-down(Kokeellinen): Mahdollistaa yhden sormen vuorovaikutuksen, kun käyttäjän sormi liikkuu ylöspäin, mikä liikkuu alaspäin.pan-up(Kokeellinen): Mahdollistaa yhden sormen vuorovaikutuksen, kun käyttäjän sormi liikkuu alaspäin, mikä liikkuu ylöspäin.pinch-zoom: Mahdollistaa usean sormen vuorovaikutuksen ja voidaan yhdistää minkä tahansa muunpan-arvon kanssa.
Liittyvät
pointer-events
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Ei |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 13.0-13.1 |
Safari on räikeä puute kosketusnäyttötuelle. Ios Safari on rajoitettu tuki, vain autoja manipulationarvoja.
lisäinformaatio
- Osoitintapahtumien tason 2 määrittely - Tekniset tiedot ovat tällä hetkellä ehdokkaiden suosituksessa, mutta niiden on tarkoitus siirtyä ehdotettuun suositukseen vuoden 2019 alussa tämän kirjoituksen jälkeen. Tarkoitus on, että asiakirjasta tulee virallinen W3C-suositus.
- MDN-dokumentaatio
- CSS-ominaisuuden kosketustoiminto - näyte - Google Chromen esittely sen toteuttamisesta.
- WebKit Bugzilla -lippu # 133112 - Avoin lippu ehdottaa Safaritukea. Lisää äänesi tehostaaksesi sitä.