touch-actionĪpašums CSS sniedz jums kontroli pār ietekmi skārienekrāns mijiedarbību ar elementu, līdzīgi vairāk plaši lietota pointer-eventsīpašumu izmantot, lai kontrolētu peles mijiedarbību.
#element ( touch-action: pan-right pinch-zoom; )touch-actionĪpašums ir noderīga galvenokārt interaktīvo UI elementiem, kas nepieciešams nedaudz atšķirīgu izturēšanos atkarībā no ierīces tipam. Kad jūsu lietotāji var sagaidīt, ka elements ar peli rīkojas noteiktā veidā, un nedaudz atšķirīga skārienekrāna darbība touch-actionbūs noderīga.
Acīmredzamākais piemērs tam ir interaktīvs kartes elements. Ja esat kādreiz apskatījis karti, kas nav paredzēta darbam ar skārienierīcēm, iespējams, esat mēģinājis iekniebt un tuvināt tikai, lai atrastu, ka pārlūkprogramma palielina elementu, bet patiesībā nav tuvinājusi faktisko karti.
Pēc noklusējuma pārlūks automātiski apstrādās mijiedarbību ar pieskārienu: saspiediet, lai tuvinātu, velciet, lai ritinātu, utt. Ja iestatīsit touch-action, nonetiks atspējota visu šo notikumu apstrāde pārlūkprogrammā, atstājot tos jūsu ziņā (izmantojot JavaScript). Ja vēlaties pārņemt tikai vienu mijiedarbību, pasakiet pārlūkprogrammai, ka tā rīkojas ar pārējo. Piemēram, ja jūs rakstījāt kādu JavaScript ka tikai rokturi tālummaiņu, jūs varat pateikt pārlūku rīkoties viss pārējais ar šo īpašumu: touch-action: pan-x pan-y;.
Skatiet CSS-Tricks (@ css-tricks) skārienjūtīgas darbības pildspalvas piemērus vietnē CodePen.
Sintakse
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationVērtības
touch-actionĪpašums pieņem šādas vērtības:
auto: Ļauj pārlūkprogrammai apstrādāt visas mijiedarbības ar panorāmu un tālummaiņu.none: Neļauj pārlūkprogrammām apstrādāt visas panoramēšanas un tālummaiņas mijiedarbības. Tas paver iespēju pielāgot šīs mijiedarbības JavaScript.pan-x: Iespējo horizontālu panoramēšanu ar viena pirksta mijiedarbību. Tas ir saīsinājums nopan-leftunpan-rightvērtības, bet to var lietot kopā arpan-y,pan-up,pan-downunpinch-zoom.pan-yIespējo vertikālu panoramēšanu ar viena pirksta mijiedarbību. Tas ir saīsinājums nopan-upunpan-downvērtības, bet to var lietot kopā arpan-x,pan-left,pan-rightunpinch-zoom.manipulation: Iespējo satveršanas un tālummaiņas mijiedarbību, bet atspējo citas, kuras, iespējams, atrodat dažās ierīcēs, piemēram, veiciet dubultskārienu, lai tuvinātu. Tas ir stenogrāfs kombinācijaipan-x pan-y pinch-zoom.pan-left(Eksperimentāls): iespējo viena pirksta mijiedarbību, kad lietotāja pirksts pārvietojas pa labi, kas virzās pa kreisi.pan-right(Eksperimentāls): iespējo viena pirksta mijiedarbību, kad lietotāja pirksts pārvietojas pa kreisi, kas virzās uz labo pusi.pan-down(Eksperimentāls): iespējo viena pirksta mijiedarbību, kad lietotāja pirksts virzās uz augšu, kas virzās uz leju.pan-up(Eksperimentāls): iespējo viena pirksta mijiedarbību, kad lietotāja pirksts virzās uz leju, kas virzās uz augšu.pinch-zoom: Iespējo vairāku pirkstu mijiedarbību, un to var apvienot ar jebkuru citupan-vērtību.
Saistīts
pointer-events
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Nē |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 13.0-13.1 |
Safari ir acīmredzams izlaidums, pieskaroties darbības atbalstam. iOs Safari ir ierobežots atbalsts tikai autoun manipulationvērtībām.
Papildus informācija
- Rādītāja notikumu 2. līmeņa specifikācija - specifikācija pašlaik ir kandidātu ieteikumā, taču šī raksta laikā tā ir paredzēta, lai pārietu uz ierosināto ieteikumu 2019. gada sākumā. Iecerēts, ka dokuments kļūs par oficiālu W3C ieteikumu.
- MDN dokumentācija
- CSS rekvizīta pieskāriena darbība - piespiešanas un tālummaiņas paraugs - Google Chrome tā ieviešanas demonstrācija.
- WebKit Bugzilla biļete Nr. 133112 - atvērta biļete, lai ieteiktu Safari atbalstu. Pievienojiet savu balsi, lai to sasistu.