Při vývoji pro dotyková zařízení pomocí JavaScriptu je nutné znát sadu typů událostí specifických pro dotyk. Tyto události umožňují efektivně zpracovávat dotykové interakce.
touchstart: Tato událost se spustí, když uživatel položí prst na dotykovou obrazovku. Je podobná události mousedown v rozhraních ovládaných myší.
touchmove: Tato událost nastane, když uživatel pohne prstem po obrazovce, zatímco je v kontaktu s dotykovým povrchem. Je analogická události mousemove.
touchend: Tato událost je vyvolána, když uživatel zvedne prst z dotykové obrazovky. Je to obdoba události mouseup.
touchcancel: Tato událost je vyvolána, když je dotyková událost přerušena před jejím dokončením. K tomu může dojít například tehdy, když systém potřebuje zpracovat samotný dotyk (např. vyskočí modální upozornění).
click: Ačkoli se nejedná o událost specifickou pro dotykové zařízení, je důležité si uvědomit, že většina dotykových zařízení bude kvůli kompatibilitě stále spouštět události kliknutí. Před vyvoláním události však často dochází ke zpoždění, aby systém zjistil, zda uživatel místo toho nezamýšlel dvojité klepnutí (u některých zařízení akce zvětšení).
dblclick: Podobně akce dvojitého klepnutí na dotykových zařízeních často vyvolávají události dblclick (dvojité kliknutí).
gesturestart, gesturechange, gestureend (specifické pro iOS): Tyto události jsou součástí specifického dotykového rozhraní API společnosti Apple pro práci s gesty více prstů (jako je přiblížení a otočení). Všimněte si, že se nejedná o standardní události webového rozhraní API, ale jsou specifické pro Safari v zařízeních se systémem iOS.
Události ukazatele: Vývoj webových aplikací směřuje k používání událostí ukazatele (pointerdown, pointermove, pointerup, pointercancel), jejichž cílem je sjednotit zpracování různých typů vstupů (myš, dotyk, stylus) do jediné sady událostí. Používání událostí ukazatele může zjednodušit logiku obsluhy událostí tím, že se všemi typy vstupů zachází podobně.
Při práci s těmito událostmi je nutné je efektivně spravovat, aby bylo zajištěno bezproblémové uživatelské prostředí. To zahrnuje uvědomění si problémů, jako je „300ms zpoždění“ v mobilních prohlížečích pro události kliknutí, a znalost toho, kdy je třeba zabránit výchozímu zpracování dotykových událostí prohlížečem, aby bylo možné implementovat vlastní chování.
Vždy testovat zpracování dotykových událostí na více zařízeních a prohlížečích pro zajištění konzistentního chování aplikací na všech platformách.
V případě připojení grafické knihovny běžící nad canvasem, např. Fabric, se nevyužívají výchozí události. Více viz http://fabricjs.com/touch-events
1 |
<span class="token string">touch:shake</span> |
1 |
<span class="token string">touch:gesture</span> |
1 |
<span class="token string">touch:drag</span> |
1 |
<span class="token string">touch:orientation</span> |
1 |
<span class="token string">touch:longpress</span> |