touch-actionNemovitost v CSS vám dává kontrolu nad vlivem interakcí s dotykovým displejem s prvkem, podobně jako další široce používaný pointer-eventsmajetku užívaného k interakcím ovládání myší.
#element ( touch-action: pan-right pinch-zoom; )touch-actionVlastnost je užitečná zejména pro interaktivní prvky uživatelského rozhraní, které potřebují trochu odlišné chování v závislosti na typu zařízení se používá. Když vaši uživatelé mohou očekávat, že se prvek bude chovat určitým způsobem pomocí myši, touch-actionbude se hodit mírně odlišné chování na dotykové obrazovce .
Nejviditelnějším příkladem je prvek interaktivní mapy. Pokud jste si někdy prohlíželi mapu, která není navržena pro práci s dotykovými zařízeními, pravděpodobně jste se pokusili přiblížit a přiblížit zobrazení, abyste zjistili, jak prohlížeč zvětšuje prvek, ale ve skutečnosti nezvětšuje skutečnou mapu.
Ve výchozím nastavení se prohlížeč automaticky zpracovávat dotykové interakce: Pinch přiblížit, přejeďte na svitku, atd. Nastavení touch-actionse nonevypne veškeré manipulace těchto událostí prohlížeče, takže je na vás, abyste implementovat (pomocí JavaScriptu). Pokud chcete převzít pouze jednu interakci, řekněte prohlížeči, aby se postaral o zbytek. Například, pokud jste napsal některé JavaScript, který manipuluje pouze s přiblížením, můžete říct, prohlížeč zvládnout všechno ostatní s touto vlastností: touch-action: pan-x pan-y;.
Podívejte se na příklady pera dotykové akce od CSS-Tricks (@ css-tricks) na CodePen.
Syntax
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationHodnoty
Ubytovací zařízení touch-actionpřijímá následující hodnoty:
auto: Umožňuje prohlížeči zpracovávat všechny interakce posouvání a zvětšování.none: Zakáže prohlížečům zpracovávat všechny interakce posouvání a zvětšování. Tím se otevírá možnost vlastní definice těchto interakcí v JavaScriptu.pan-x: Umožňuje horizontální posouvání pomocí interakce jedním prstem. To je zkratka propan-leftapan-righthodnoty, ale mohou být použity v kombinaci span-y,pan-up,pan-downapinch-zoom.pan-yUmožňuje svislé posouvání pomocí interakce jedním prstem. To je zkratka propan-upapan-downhodnoty, ale mohou být použity v kombinaci span-x,pan-left,pan-rightapinch-zoom.manipulation: Umožňuje interakce sevřením a přiblížením, ale deaktivuje další, které na některých zařízeních najdete, například přiblížení dvojitým klepnutím. Je zkratkou pro kombinacipan-x pan-y pinch-zoom.pan-left(Experimentální): Umožňuje interakci jedním prstem, když se prst uživatele pohybuje doprava, což se posouvá doleva.pan-right(Experimentální): Umožňuje interakci jedním prstem, když se prst uživatele posune doleva a posune se doprava.pan-down(Experimentální): Umožňuje interakci jedním prstem, když se prst uživatele pohybuje nahoru a posouvá se dolů.pan-up(Experimentální): Umožňuje interakci jedním prstem, když se prst uživatele posune dolů, což posouvá nahoru.pinch-zoom: Umožňuje interakci několika prsty a lze je kombinovat s jakoukoli jinoupan-hodnotou.
Příbuzný
pointer-events
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Ne |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 13.0-13.1 |
Safari je zjevné opomenutí podpory dotykových akcí. iOs Safari má omezenou podporu, pouze pro hodnoty autoa manipulation.
dodatečné informace
- Pointer Events Level 2 Specification - The spec is currently in Candidate Doporučení, ale je zamýšlel přejít na Navrhované doporučení počátkem roku 2019, od tohoto psaní. Záměrem je, aby se dokument stal oficiálním doporučením W3C.
- Dokumentace MDN
- Vlastnost CSS s dotykovým ovládáním pinch-zoom Ukázka - ukázka implementace Google Chrome.
- WebKit Bugzilla Ticket # 133112 - Otevřená vstupenka k návrhu podpory Safari. Přidejte svůj hlas, abyste to zvrátili.