Události ukazatele

Události ukazatele jsou moderním způsobem, jak zpracovat vstup z různorodých ukazovacích zařízení, například myš, pero/stylus, doteková obrazovka a podobně.

Krátká historie

Udělejme si malý přehled, abyste porozuměli obecnému obrazu a místu událostí ukazatele mezi ostatními druhy událostí.

• PÅ™ed dlouhou dobou v minulosti existovaly jen události myÅ¡i.

  Pak se rozšířila doteková zařízení, zvláštÄ› mobilní telefony a tablety. Aby na nich fungovaly již existující skripty, generovala (a stále generují) události myÅ¡i, například dotek na dotekové obrazovce vyvolá mousedown. Doteková zařízení tedy s webovými stránkami fungovala dobÅ™e.

  Jenže doteková zařízení mají více možností než myš. Je například možné dotknout se více bodů najednou („multidotek“). Události myši však nemají nezbytné vlastnosti k tomu, aby takové multidoteky zpracovaly.

• Byly tedy zavedeny dotekové události, napÅ™. touchstart, touchend, touchmove, které obsahují vlastnosti specifické pro dotek (nebudeme je tady podrobnÄ› probírat, jelikož vlastnosti ukazatele jsou jeÅ¡tÄ› lepší).

  Stále to však nestačilo, protože existuje mnoho dalších zařízení, např. pera, která mají své vlastní schopnosti. Kromě toho bylo nepohodlné psát kód, který naslouchá jak dotekovým událostem, tak událostem myši.

• K vyÅ™eÅ¡ení tÄ›chto problémů byl zaveden nový standard událostí ukazatele, který poskytuje jedinou sadu událostí pro vÅ¡echny druhy ukazovacích zařízení.

V současnosti je ve všech významných prohlížečích podporována specifikace událostí ukazatele 2. úrovně, zatímco novější specifikace událostí ukazatele 3. úrovně je ve vývoji a je s událostmi ukazatele 2. úrovně převážně kompatibilní.

Pokud nevyvíjíte pro staré prohlížeče, např. Internet Explorer 10, Safari 12 nebo starší, není již nadále důvod používat události myši nebo dotekové události – můžeme přejít na události ukazatele.

Váš kód pak bude správně fungovat s dotekovými zařízeními i s myší.

Při tom všem však existují důležité zvláštnosti, které byste měli znát, abyste používali události ukazatele správně a vyhnuli se překvapením. Zmíníme se o nich v tomto článku.

Typy událostí ukazatele

Události ukazatele se nazývají podobně jako události myši:

Jak vidíme, pro každou mouse<událost> existuje pointer<událost>, která hraje podobnou roli. Navíc existují tÅ™i další události ukazatele, které nemají odpovídající protÄ›jÅ¡ek mouse.... Brzy je vysvÄ›tlíme.

Vlastnosti událostí ukazatele

Události ukazatele mají tytéž vlastnosti jako události myÅ¡i, napÅ™. clientX/Y, target atd., plus nÄ›které další:

• pointerId – unikátní identifikátor ukazatele, který vyvolal událost.

  Generováno prohlížečem. Umožňuje nám zpracovat více ukazatelů, například dotekovou obrazovku se stylusem a multidotek (příklady budou následovat).

• pointerType – typ ukazovacího zařízení. Musí to být Å™etÄ›zec, a to jeden z následujících: "mouse", "pen" nebo "touch".

  Tuto vlastnost můžeme použít k tomu, abychom na různé druhy ukazatelů reagovali různě.

• isPrimary – je true pro primární ukazatel (první prst pÅ™i multidoteku).

Některá ukazovací zařízení měří plochu a tlak doteku, např. prstu na dotekové obrazovce. Pro ně existují následující vlastnosti:

• width – šířka plochy, kde se ukazatel (napÅ™. prst) dotýká zařízení. Když není podporována, napÅ™. u myÅ¡i, je vždy 1.
• height – výška plochy, kde se ukazatel dotýká zařízení. Když není podporována, je vždy 1.
• pressure – tlak doteku ukazatele v rozsahu od 0 do 1. U zařízení, která tlak nepodporují, musí být buď 0.5 (stisknuto), nebo 0.
• tangentialPressure – normalizovaný tangenciální tlak.
• tiltX, tiltY, twist – vlastnosti specifické pro pero, které popisují, jak je pero umístÄ›no vzhledem k povrchu.

Většina zařízení tyto vlastnosti nepodporuje, takže se používají jen vzácně. Budete-li je potřebovat, podrobnosti o nich naleznete ve specifikaci.

Multidotek

Jedna z věcí, které události myši vůbec nepodporují, je multidotek: uživatel se může svého telefonu nebo tabletu dotknout na několika místech najednou nebo provádět speciální gesta.

Události ukazatele umožňují zpracování multidoteku pomocí vlastností pointerId a isPrimary.

Když se uživatel dotkne dotekové obrazovky na jednom místě a pak na ni položí další prst někde jinde, stane se následující:

1. Při prvním doteku prstu:
   • pointerdown s isPrimary=true a nÄ›jakým pointerId.
2. Při druhém a dalších dotecích prstu (za předpokladu, že první prst se stále dotýká):
   • pointerdown s isPrimary=false a odliÅ¡ným pointerId pro každý prst.

Prosíme vÅ¡imnÄ›te si, že pointerId není pÅ™iÅ™azeno celému zařízení, ale každému dotýkajícímu se prstu. Jestliže se současnÄ› dotkneme obrazovky pÄ›ti prsty, dostaneme pÄ›t událostí pointerdown, každá bude mít své vlastní souÅ™adnice a odliÅ¡ný pointerId.

Události spojené s prvním prstem budou mít vždy isPrimary=true.

Pomocí pointerId můžeme sledovat více dotýkajících se prstů. Když uživatel pÅ™esune prst a pak jej zvedne, dostaneme události pointermove a pointerup se stejným pointerId, jaký jsme mÄ›li v pointerdown.

Následující demo loguje události pointerdown a pointerup:

Prosíme vÅ¡imnÄ›te si, že abyste skutečnÄ› vidÄ›li rozdíl v pointerId/isPrimary, musíte používat dotekové zařízení, například mobilní telefon nebo tablet. U jednodotekových zařízení, jakým je myÅ¡, budou vÅ¡echny události ukazatele mít pořád stejné pointerId a isPrimary=true.

Událost pointercancel

Událost pointercancel se spustí, když probíhá interakce s ukazatelem a pak se stane nÄ›co, co způsobí její ukončení, takže žádné další události ukazatele se nevygenerují.

Takové případy jsou:

• Dotekové zařízení bylo fyzicky odpojeno.
• ZmÄ›nila se orientace zařízení (tablet byl otočen).
• Prohlížeč se rozhodl, že tuto interakci zpracuje sám, protože ji považuje za gesto myÅ¡i, akci zoom-and-pan nebo nÄ›co jiného.

PÅ™edvedeme si pointercancel na praktickém příkladu, abychom vidÄ›li, jak nás ovlivní.

Dejme tomu, že implementujeme přetahování míče, podobně jako na začátku článku Přetahování pomocí událostí myši.

Průběh uživatelských akcí a odpovídajících událostí je následující:

1. Uživatel se dotkne obrázku, aby začal přetahovat.
   • spustí se událost pointerdown
2. Pak začne pohybovat ukazatelem (a tedy přetahovat obrázek)
   • spustí se událost pointermove, zÅ™ejmÄ› nÄ›kolikrát
3. A pak následuje pÅ™ekvapení! Prohlížeč má svou nativní podporu pÅ™etahování obrázků, která se spustí a pÅ™evezme proces pÅ™etahování, čímž vygeneruje událost pointercancel.
   • Prohlížeč bude nyní zpracovávat pÅ™etahování obrázku sám. Uživatel může dokonce pÅ™etáhnout obrázek míče mimo prohlížeč, tÅ™eba do svého poÅ¡tovního programu nebo správce souborů.
   • Žádné další události pointermove se pro nás nekonají.

Problém tedy je v tom, že prohlížeč se „zmocní“ interakce: na začátku procesu „pÅ™etahování“ se spustí pointercancel a žádné další události pointermove se nevygenerují.

Následuje demo pÅ™etahování s logováním událostí ukazatele (jen up/down, move a cancel) do textarea:

My bychom ovšem chtěli implementovat své vlastní přetahování. Řekněme tedy prohlížeči, aby je nepřebíral.

Abyste se vyhnuli pointercancel, zakažte standardní akce prohlížeče.

Musíme udělat následující dvě věci:

1. Zakázat aktivaci nativního přetahování:
   • Můžeme to udÄ›lat nastavením míč.ondragstart = () => false, tak, jak je popsáno v kapitole PÅ™etahování pomocí událostí myÅ¡i.
   • To funguje správnÄ› pro události myÅ¡i.
2. Pro doteková zařízení existují i jiné akce prohlížeče týkající se doteku (kromě přetahování). Abychom se vyhnuli problémům i s nimi:
   • Zakážeme je nastavením #míč { touch-action: none } v CSS.
   • Pak bude náš kód fungovat na dotekových zařízeních.

Když to udÄ›láme, budou události fungovat tak, jak zamýšlíme. Prohlížeč se nezmocní procesu a nevyvolá pointercancel.

V následujícím demu jsou tyto řádky přidány:

Jak vidíte, další pointercancel se nekoná.

Nyní můžeme přidat kód, který bude skutečně hýbat míčem, a naše přetahování bude správně fungovat pro myš i pro doteková zařízení.

Zachycení ukazatele

Zachycení ukazatele je speciální prvek událostí ukazatele.

Jeho myšlenka je velmi jednoduchá, ale na první pohled se může zdát trochu zvláštní, jelikož pro události žádného jiného druhu nic podobného neexistuje.

Hlavní metodou je:

• elem.setPointerCapture(pointerId) – naváže události se zadaným pointerId na elem. Po tomto volání budou vÅ¡echny události ukazatele se stejným pointerId mít cíl elem (jako by se staly na elem), bez ohledu na to, kde v dokumentu se opravdu staly.

Jinými slovy, elem.setPointerCapture(pointerId) pÅ™esmÄ›ruje vÅ¡echny následné události se zadaným pointerId na elem.

Vazba bude odstraněna:

• automaticky, když nastane událost pointerup nebo pointercancel,
• automaticky, když je z dokumentu odstranÄ›n elem,
• když je volána elem.releasePointerCapture(pointerId).

K čemu je to nyní dobré? Nastal čas ukázat příklad ze skutečného života.

Zachycení ukazatele můžeme použít ke zjednodušení přetahování a podobných interakcí.

Vzpomeňme si, jak můžeme implementovat vlastní posuvník, popsaný v kapitole Přetahování pomocí událostí myši.

Můžeme vytvoÅ™it element posuvník, který bude pÅ™edstavovat pás a „šoupátko“ (šoupátko) uvnitÅ™:

<div class="posuvník">
  <div class="šoupátko"></div>
</div>

S použitím stylů vypadá následovně:

Po náhradě událostí myši podobnými událostmi ukazatele je logika fungování následující, jak bylo popsáno:

1. Uživatel se dotkne Å¡oupátka šoupátko – spustí se pointerdown.
2. Pak uživatel pÅ™esune ukazatel – spustí se pointermove a náš kód pÅ™esune element šoupátko.
   • …Když se ukazatel pÅ™esunuje, může opustit element šoupátko a pÅ™esunout se nad nebo pod nÄ›. Pak by se šoupátko mÄ›lo posunovat výhradnÄ› vodorovnÄ› a zůstat zarovnané s ukazatelem.

V Å™eÅ¡ení založeném na událostech myÅ¡i jsme pro sledování vÅ¡ech pohybů ukazatele, včetnÄ› jeho pÅ™emístÄ›ní nad nebo pod šoupátko, museli pÅ™iÅ™adit celému document handler události mousemove.

To vÅ¡ak není to nejčistší Å™eÅ¡ení. Jedním z jeho problémů je, že když uživatel posunuje ukazatelem po dokumentu, může spustit handlery událostí (napÅ™. mouseover) na jiných elementech a vyvolat zcela nesouvisející funkcionalitu UI, což nechceme.

Na tomto místÄ› pÅ™ichází do hry setPointerCapture.

• V handleru pointerdown můžeme volat šoupátko.setPointerCapture(událost.pointerId).
• Pak se budoucí události ukazatele až do pointerup/cancel pÅ™esmÄ›rují na šoupátko.
• Když dojde k pointerup (pÅ™etahování skončí), vazba se automaticky odstraní a my se o ni nemusíme starat.

I když tedy uživatel bude pohybovat ukazatelem po celém dokumentu, handlery událostí se budou volat na šoupátko. PÅ™esto budou souÅ™adnicové vlastnosti objektů událostí, napÅ™. clientX/clientY, stále správnÄ› – zachycení má vliv pouze na target/currentTarget.

Zde je nástin kódu:

šoupátko.onpointerdown = function(událost) {
  // přesměruje všechny události ukazatele (až do pointerup) na šoupátko
  šoupátko.setPointerCapture(událost.pointerId);

  // začneme sledovat pohyby ukazatele
  šoupátko.onpointermove = function(událost) {
    // pohyb posuvníku: nasloucháme na šoupátku, jelikož všechny události ukazatele jsou přesměrovány na něj
    let nováLevá = událost.clientX - posuvník.getBoundingClientRect().left;
    šoupátko.style.left = nováLevá + 'px';
  };

  // při zvednutí ukazatele ukončíme sledování jeho pohybu
  šoupátko.onpointerup = function(událost) {
    šoupátko.onpointermove = null;
    šoupátko.onpointerup = null;
    // ...také zpracujeme „konec přetahování“, je-li to nutné
  };
};

// poznámka: nemusíme volat šoupátko.releasePointerCapture,
// při pointerup k němu dojde automaticky

Celé demo:

V demu je navíc další element s handlerem onmouseover, který zobrazuje aktuální datum.

Prosíme všimněte si, že když přetahujete šoupátko, můžete se nad tento element přesunout a jeho handler se nespustí.

PÅ™etahování tedy díky setPointerCapture nemá žádné vedlejší efekty.

Nakonec nám tedy zachycení ukazatele dává dvě výhody:

1. Kód je čistší, neboÅ¥ již nemusíme pÅ™idávat a odstraňovat handlery na celém document. Vazba se odstraní automaticky.
2. Pokud jsou v dokumentu jiné handlery událostí ukazatele, ukazatel je nemůže neúmyslně spustit, když uživatel posunuje posuvníkem.

Události pro zachycení ukazatele

Pro úplnost se zmíníme ještě o jedné věci.

Se zachycením ukazatele jsou spojeny dvě události:

• gotpointercapture se spustí, když element použije setPointerCapture, aby umožnil zachycení.
• lostpointercapture se spustí, když je zachycení odstranÄ›no: buď výslovnÄ› voláním releasePointerCapture, nebo automaticky pÅ™i pointerup/pointercancel.

Shrnutí

Události ukazatele nám umožňují zpracovávat události myši, dotekových zařízení a pera současně, stejnou částí kódu.

Události ukazatele rozÅ¡iÅ™ují události myÅ¡i. V názvech událostí můžeme nahradit mouse za pointer a očekávat, že náš kód bude i nadále fungovat pro myÅ¡ a bude mít lepší podporu zařízení jiných druhů.

PÅ™i pÅ™etahování a složitých dotekových interakcích, kdy se prohlížeč může rozhodnout zmocnit se jich a zpracovávat je sám, nezapomeňte zakázat standardní akce na událostech nastavením touch-action: none v CSS pro elementy, kterých se to týká.

Další schopnosti událostí ukazatele jsou:

• Podpora multidoteku pomocí pointerId a isPrimary.
• Vlastnosti specifické pro nÄ›která zařízení, napÅ™. pressure, width/height a jiné.
• Zachycení ukazatele: můžeme vÅ¡echny události ukazatele pÅ™esmÄ›rovat na specifický element až do pointerup/pointercancel.

V současnosti jsou události ukazatele podporovány ve všech významných prohlížečích, takže na ně můžete bezpečně přejít, zvláště pokud nepotřebujete IE10- a Safari 12-. A i pro tyto prohlížeče existují polyfilly, které umožňují podporu událostí ukazatele.