touch-actionCSS nuosavybė suteikia jums kontroliuoti touchscreen sąveikų efektas su elemento, panašus į plačiai naudojamas pointer-eventsnaudojami siekiant kontroliuoti pelės sąveikos turtą.
#element ( touch-action: pan-right pinch-zoom; )Ši touch-actionypatybė pirmiausia naudinga interaktyviems vartotojo sąsajos elementams, kuriems reikia šiek tiek kitokio elgesio, atsižvelgiant į naudojamo įrenginio tipą. Kai jūsų vartotojai gali tikėtis, kad elementas elgsis tam tikru būdu su pele, ir šiek tiek kitokia elgsena jutikliniame ekrane, touch-actionbus naudinga.
Akivaizdžiausias to pavyzdys yra interaktyvus žemėlapio elementas. Jei kada nors žiūrėjote žemėlapį, kuris nėra sukurtas darbui su jutikliniais įrenginiais, tikriausiai bandėte suimti ir priartinti tik tam, kad rastumėte naršyklę, kuri padidina elementą, bet iš tikrųjų ne mastelio keitimą.
Pagal nutylėjimą, naršyklė atliks touch sąveika automatiškai: Žiupsnelis priartinti, braukite slinkti ir pan nustatymas touch-actionį noneišjungs visus naršyklės tvarkymo šių įvykių, paliekant juos jums įgyvendinti (naudodama JavaScript). Jei norite perimti tik vieną sąveiką, liepkite naršyklei tvarkyti likusias dalis. Pavyzdžiui, jei jūs rašė šiek JavaScript, kad tik rankenos priartinimo, galite pasakyti naršyklę tvarkyti visa kita su šiuo turtu: touch-action: pan-x pan-y;.
Peržiūrėkite „CSS-Tricks“ („@ css-tricks“) jutiklinio rašymo pavyzdžius „CodePen“.
Sintaksė
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationVertybės
touch-actionNuosavybė priima šias vertes:
auto: Leidžia naršyklei tvarkyti visas sąveikas su masteliu ir masteliu.none: Neleidžia naršyklėms tvarkyti visų sąveikų su masteliu ir masteliu. Tai atveria galimybę pritaikyti tas sąveikas „JavaScript“.pan-x: Įgalina horizontalų panoraminį judėjimą vienu pirštu. Tai sutrumpinta užpan-leftirpan-rightvertybes, tačiau gali būti naudojamas kartu supan-y,pan-up,pan-downirpinch-zoom.pan-yĮgalina vertikalų panoraminį judėjimą vienu pirštu. Tai sutrumpinta užpan-upirpan-downvertybes, tačiau gali būti naudojamas kartu supan-x,pan-left,pan-rightirpinch-zoom.manipulation: Įgalina sąveiką suimant ir priartinant, bet išjungia kitus, kuriuos galite rasti kai kuriuose įrenginiuose, pvz., Dukart palieskite, kad priartintumėte. Tai yra trumpas derinyspan-x pan-y pinch-zoom.pan-left(Eksperimentinis): įgalina vieno piršto sąveiką, kai vartotojo pirštas juda į dešinę, kuri krypsta į kairę.pan-right(Eksperimentinis): įgalina vieno piršto sąveiką, kai vartotojo pirštas juda į kairę, kuri krypsta į dešinę.pan-down(Eksperimentinis): įgalina vieno piršto sąveiką, kai vartotojo pirštas juda aukštyn, kuris krypsta žemyn.pan-up(Eksperimentinis): įgalina vieno piršto sąveiką, kai vartotojo pirštas juda žemyn, kuris krypsta į viršų.pinch-zoom: Įgalina kelių pirštų sąveiką ir gali būti derinami su bet kokia kitapan-verte.
Susijęs
pointer-events
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Ne |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | 13.0-13.1 |
„Safari“ yra akivaizdus neveikimas palaikant prisilietimus. „iOs Safari“ palaiko ribotą palaikymą tik autoir manipulationvertybėms.
Papildoma informacija
- 2 lygio žymeklio įvykių specifikacija - specifikacija šiuo metu yra kandidatų rekomendacijoje, tačiau nuo šio rašymo ketinama pereiti prie siūlomos rekomendacijos 2019 m. Pradžioje. Siekiama, kad dokumentas taptų oficialia W3C rekomendacija.
- MDN dokumentacija
- „Touch-action pinch-zoom“ CSS nuosavybės pavyzdys - „Google Chrome“ demonstracinė jos įgyvendinimo versija.
- „WebKit Bugzilla“ bilietas Nr. 133112 - atidarykite bilietą, kad pasiūlytumėte „Safari“ palaikymą. Pridėkite savo balsą, kad jį sukeltumėte.