Normalizace událostí pro mobily a počítače pomocí pointer.js

Mobilní revoluce přinesla řadu nových výzev, jednou z nich byla interakce a zpracování událostí. Máme sadu nových dotykových událostí a tradiční události na ploše a události kliknutí fungují na obou zařízeních, ale přesun myší a dotyk nejsou vždy synchronizované a existuje řada dalších nuancí, na které narazíte u různých zařízení. To je důvod, proč Web Developer Potch od Mozilly vytvořil pointer.js, nástroj, který vývojářům pomůže snadněji spravovat události napříč zařízeními.

Dokumentace pointer.js

Dokumentace pointer.js vysvětluje projekt stejně dobře a jednoduše, jak by měl, takže nebudu znovu objevovat kolo. Přímo z dokumentů:

Jednoduchá API jsou nejlepší API a Potch tohle dokázal.

Použití pointer.js

Zde je několik příkladů použití pointer.js:

var element = document.getElementById("myElement");

element.addEventListener("pointerdown", function(detailedEvent) {
	// Do something
});

element.addEventListener("pointerleave", function(detailedEvent) {
	// Do something
});

element.addEventListener("pointerclick", function(detailedEvent) {
	// Do something
	if(detailedEvent.mouse) {
		// desktop
	}
	else {
		// mobile
	}
});

Potch napsal JS tak, že přidáváte vlastní posluchače událostí tradičním způsobem prostřednictvím addEventListener. Také se mi líbí, že objekt Event je pravdivý, nikoli nový objekt, který poskytuje původní událost jako jednu vlastnost. Další informace přidané k objektu jsou užitečné při identifikaci platformy a toho, která událost byla skutečně spuštěna.

Normalizace událostí byla jedním z původních důvodů pro první frameworky událostí...a nemusely se ani zabývat mobilními zařízeními! Potch si s touto utilitou pro normalizaci událostí poradil dobře a nemůžu se dočkat, až ji použiji při svém dalším redesignu!