Jak používat události ukazatele v JavaScriptu

Klíčové věci

• Webové aplikace by měly podporovat řadu vstupních zařízení, nejen myš, aby uspokojily širší publikum.
• Události ukazatele v JavaScriptu zpracovávají události myši i dotyku, takže není nutné je implementovat samostatně.
• Události ukazatele mají podobné názvy a funkce jako události myši, což usnadňuje aktualizaci stávajícího kódu, aby podporoval vstupy dotykem a perem.

Mnoho webových aplikací předpokládá, že ukazovacím zařízením uživatele bude myš, takže ke zpracování interakcí používají události myši. S rozmachem zařízení s dotykovou obrazovkou však uživatelé k interakci s webovými stránkami nepotřebují myš. Je nezbytné podporovat řadu vstupních zařízení, aby uspokojila co nejširší publikum.

JavaScript má novější standard nazvaný události ukazatele. Zvládá události myši i dotyku, takže se nemusíte starat o jejich samostatnou implementaci.

Co jsou události ukazatele?

Události ukazatele jsou webovým standardem, který definuje jednotný způsob zpracování různých metod zadávání ve webovém prohlížeči, včetně myši, dotyku a pera. Tyto události poskytují konzistentní a na platformě nezávislý způsob interakce s webovým obsahem napříč různými zařízeními.

Stručně řečeno, události ukazatele vám pomohou zvládnout tuto skupinu uživatelských interakcí bez ohledu na zdroj.

Typy událostí ukazatele

Události ukazatele jsou pojmenovány podobně jako události myši, které již možná znáte. Pro každého mouseEvent v JavaScriptu existuje odpovídající pointerEvent. To znamená, že se můžete vrátit ke svému starému kódu a přepnout „myš“ za „ukazatel“, abyste začali podporovat dotykové vstupy a vstupy perem.

Následující tabulka ukazuje různé události ukazatele ve srovnání s událostmi myši:

Můžete vidět, že existují tři další události ukazatele bez odpovídajících událostí myši. O těchto událostech se dozvíte později.

Použití událostí ukazatele v JavaScriptu

Události ukazatele můžete použít stejným způsobem jako události myši. Jako většina zpracování událostí se proces obvykle řídí tímto vzorem:

1. Použijte selektor DOM získat prvek.
2. Za použití addEventListener zadejte událost, která vás zajímá, a funkci zpětného volání.
3. Použijte vlastnosti a metody argumentu zpětného volání, an událost objekt.

Zde je příklad použití události pointermove:

// Get the target element
const target = document.getElementById('target');
// Add an event listener to your target element
target.addEventListener('pointermove', handlePointerMove);
// Function to handle pointer move event
functionhandlePointerMove(ev) {
// Handle the event however you want to
 target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

Tento blok kódu definuje cílový prvek a funkce JavaScriptu zvládnout ukazatel pohybu událost pak používá a Posluchač událostí JavaScriptu pro připojení události ukazatele a funkce k cílovému prvku.

Pomocí tohoto kódu prvek s „cílovým“ ID zobrazí souřadnice ukazatele, když na něj přejedete kurzorem, prstem nebo perem:

Stejným způsobem můžete použít další události ukazatele.

Ukazatel zrušit událost

Událost pointercancel se spustí, když je jiná událost ukazatele přerušena předtím, než dokončí svou operaci, jak bylo původně zamýšleno. Normálně prohlížeč zruší jakoukoli událost ukazatele, která mohla být předtím v akci. Existuje mnoho důvodů, proč a ukazatel zrušit událost může spustit například:

• Když uživatel při přetažení prvku po obrazovce přijme telefonní hovor nebo jiné vyrušující oznámení.
• Když se změní orientace zařízení.
• Když okno prohlížeče ztratí pozornost.
• Když uživatel přepne na jinou kartu nebo aplikaci.

s ukazatel zrušit události, můžete tyto situace řešit, jak chcete. Zde je příklad:

const target = document.getElementById('target');
target.addEventListener('pointercancel', (event) => {
// Handle the situation where the pointer cancels. For example, you
// can release the pointer capture
 target.releasePointerCapture(event.pointerId);
});

Zachycení ukazatele

Zachycení ukazatele je funkce, která umožňuje specifické HTML prvek zachytit a reagovat na všechny události ukazatele pro konkrétní ukazatel, i když tyto události nastanou mimo hranice prvku.

Můžete nastavit zachycení ukazatele pro prvek pomocí setpointercapture() a uvolněte zachycení ukazatele pomocí releasepointercapture() metoda.

The gotpointercapture a zachycení ztraceného ukazatele události ukazatele jsou užitečné pro zachycení ukazatele.

Událost gotpointercapture

The gotpointercapture událost se spustí vždy, když prvek získá zachycení ukazatele. Tuto událost můžete použít k inicializaci stavu pro váš HTML element pro zpracování událostí ukazatele. Například v aplikaci pro kreslení můžete použít gotpointercapture událost pro nastavení počáteční pozice kurzoru.

Událost zachycování ztraceného pointeru

The zachycení ztraceného ukazatele událost se spustí, když prvek ztratí zachycení ukazatele. Můžete jej použít k vyčištění nebo odstranění jakéhokoli stavu vytvořeného, ​​když prvek získal zachycení ukazatele. V aplikaci kreslení můžete chtít použít zachycení ztraceného ukazatele pro skrytí kurzoru.

Vlastnosti událostí ukazatele

Události ukazatele mají vlastnosti, které vám pomohou učinit váš web interaktivnějším a responzivnějším. Vlastnosti událostí myši jsou stejné vlastnosti, jaké najdete v událostech ukazatele, plus některé další vlastnosti. Tento článek vysvětluje některé další vlastnosti.

Vlastnost pointerId

The pointerId je vlastnost události ukazatele, která vám pomáhá identifikovat každý jedinečný vstup ukazatele, jako je stylus, prst nebo myš. Každý vstup ukazatele získá jedinečné ID (automaticky vygenerované prohlížečem), které vám umožní sledovat a provádět s ním operace.

Skvělé využití pro pointerId property je herní aplikace, kde uživatelé současně používají více prstů nebo stylusů. The pointerId vlastnost vám umožňuje sledovat každý povrch ukazatele tím, že každému z nich přiřadíte jedinečné ID. Primární ID se přiřadí k prvnímu vstupu ukazatele.

Tato vlastnost je užitečná zejména pro dotyková zařízení. Zařízení, která se spoléhají na ukazatele myši, mohou mít současně pouze jeden vstup ukazatele, aniž by k nim bylo připojeno nějaké externí zařízení.

Zde je jednoduchý příklad, který vytiskne ID každého vstupu ukazatele do konzoly:

const target = document.getElementById('target');
target.addEventListener('pointerdown', (event) => {
console.log(`Pointer ID: ${event.pointerId}`);
// Handle the pointer down event for the specific pointerId
});

Vlastnost pointerType

Vlastnost pointerType vám pomáhá rozlišovat mezi různými typy vstupů ukazatele a umožňuje provádět operace založené na nich. Můžete rozlišovat mezi myší, perem a dotykem prstu. Tato vlastnost může mít pouze jeden ze tří řetězcových vstupů: „myš“, „pero“ nebo „dotek“. Zde je jednoduchý příklad použití pointerType vlastnictví:

functionhandlePointerEvent(event){
// Using the pointerType property
switch (event.pointerType) {
case'mouse':
// Handle the situation where the pointing device is a mouse
console.log(`Mouse Pointer ID: ${event.pointerId}`);
break;
case'pen':
// Handle the situation where the pointing device is a stylus
console.log(`Stylus Pointer ID: ${event.pointerId}`);
break;
case'touch':
// Handle the situation where the pointing device is a finger touch
console.log(`Touch Pointer ID: ${event.pointerId}`);
break;
default:
// Handle other pointer types or cases
console.log(`pointerType ${event.pointerType} is not supported`);
break;
 }
}
// Attach pointer events to elements
element.addEventListener('pointerdown', handlePointerEvent);

Vlastnosti šířky a výšky

Tyto vlastnosti představují šířku a výšku kontaktní plochy ukazatele v milimetrech. Některé prohlížeče je nepodporují a jejich hodnota bude v takových prohlížečích vždy 1.

Dobrým případem použití pro tyto vlastnosti budou aplikace, které vyžadují přesné zadání nebo potřebují rozlišit velikosti různých vstupů. Například v kreslící aplikaci může větší výška a šířka znamenat, že uživatel kreslí širším tahem a naopak.

Většinou budete pravděpodobně používat vlastnosti width a height pro dotykové události.

Použijte události ukazatele pro větší inkluzivitu

Události ukazatele vám umožňují uspokojit širokou škálu zařízení a typů vstupů, aniž byste museli procházet velkým stresem. Vždy byste je měli používat ve svých aplikacích, aby odpovídaly moderním standardům a pomáhaly vytvářet lepší web.