Zvládejte myší a dotykový vstup pomocí rozhraní API Ukazatele událostí

Vzhledem k tomu, že stále více lidí používá své mobilní telefony a tablety k prohlížení webu, musíme jako vývojáři zajistit, aby naše webová rozhraní byla plně přístupná dotykem. Nastavení click a hover posluchači událostí svým způsobem fungují, ale je to zjevně pozůstatkové řešení z éry myší.

Naštěstí je ve městě nové API, které vyhovuje potřebám zařízení s myší, dotykem a stylusem. Jmenuje se Ukazatel události (nezaměňovat se stejnojmennou vlastností CSS) a umožňuje nám přidávat posluchače událostí, které se lépe hodí pro práci se všemi typy na vstupu.

Seznamte se s novými událostmi

Nové rozhraní Pointer Event API je vyvinutá verze rozhraní Mouse Event, které jsme všichni doposud používali. Rozšiřuje funkčnost starého API a přidává podporu pro vícedotyková gesta, přesné zadávání perem a celkově hladší interakci s dotykovou obrazovkou.

  • ukazatel dolů – ukazatel se stane aktivním
  • pointerup – ukazatel přestane být aktivní
  • pointerover, pointerenter – ukazatel zadá hranice prvku
  • pointerout, pointerleave – ukazatel opouští hranice prvku
  • pohyb ukazatele – ukazatel se pohybuje uvnitř hranic prvku
  • pointercancel – Ukazatel přestal generovat události, např. vstupní zařízení deaktivováno
  • gotpointercapture – Ukazatel vstoupil do stavu zachycení ukazatele, např. přetažením pohyblivého prvku
  • lostpointercapture – Stav zachycení ukazatele skončil

Většina událostí ukazatele má přímé alternativy mezi starými událostmi myši. Jakmile nové API získá plnou podporu prohlížeče, můžeme jej přímo nahradit modernějšími alternativami:

const button = document.querySelector("button");

// Instead of mouseover
button.addEventListener('mouseover', doSomething);

// We can use pointerover
button.addEventListener('pointerover', doSomething);

Interakce s myší by měla být v obou případech stejná. Pomocí prstů nebo stylusu však bude snazší programovat s novým API.

Rozpoznání typu vstupu

Úžasnou funkcí rozhraní API Ukazatele událostí je, že dokáže zjistit, jaký typ vstupu byl použit. To může být užitečné, když chcete ignorovat některé ze vstupních metod nebo poskytnout zvláštní zpětnou vazbu pro každou z nich.

button.addEventListener('pointereover', function(ev){
  switch(ev.pointerType) {
    case 'mouse':
      // The used device is a mouse or trackpad.
      break;
    case 'touch':
      // Input via touchscreen.
      break;
    case 'pen':
      // Stylus input.
      break;
    default:
      // Browser can't recognize the used device.
      break;
  }
});

Další vlastnosti

Rozhraní Ukazatel událostí poskytuje také některá další zajímavá data. Zahrnuje všechny vlastnosti MouseEvent plus následující:

  • pointerId – Jedinečné ID pro ukazatel způsobující událost.
  • šířka a výška – velikost kontaktní oblasti v pixelech.
  • tlak – tlak dotyku, je-li k dispozici.
  • tiltX a tiltY – Úhel, pod kterým se stylus dotýká obrazovky.
  • isPrimary – Určuje, zda byla primárním ukazovacím zařízením odeslána událost.

Podpora prohlížeče

Události ukazatele jsou poměrně nové, takže kompatibilita prohlížečů ještě není dokonalá. Chrome (desktop a mobil), Edge, IE a Opera mají plnou podporu; Firefox a Safari ne.

Mohu použít

Chcete-li zkontrolovat, zda má prohlížeč rozhraní API Ukazatele událostí, můžete použít objekt okna:

if (window.PointerEvent) {
  // Pointer Events enabled.
} else {
  // Pointer Events not supported
}

Populární open source pollyfill je také dostupný pro ty, kteří nechtějí čekat na plné přijetí prohlížeče.

Závěr

Ačkoli ještě nemá plnou podporu prohlížeče, API Ukazatel událostí nakonec převezme staré události myši. Poskytuje spoustu skvělých funkcí, které zvýší dostupnost webu a umožní vývojářům vytvářet pokročilejší aplikace založené na dotyku a stylusu.

Pokud se chcete dozvědět více o rozhraní Power Events API, doporučujeme vám prostudovat si tyto zdroje:

  • Ukazujeme cestu vpřed – článek o Google Developers
  • Ukazatelské události – Úroveň 2 – Koncept editora W3C
  • Ukazatel událostí na MDN

No