Ako používať udalosti ukazovateľa v JavaScripte

Kľúčové informácie

• Webové aplikácie by mali podporovať celý rad vstupných zariadení, nielen myš, aby uspokojili širšie publikum.
• Udalosti ukazovateľa v JavaScripte spracovávajú udalosti myši aj dotyku, čím sa eliminuje potreba ich samostatnej implementácie.
• Udalosti ukazovateľa majú podobné názvy a funkcie ako udalosti myši, čo uľahčuje aktualizáciu existujúceho kódu na podporu dotykových a perových vstupov.

Mnohé webové aplikácie predpokladajú, že ukazovacím zariadením používateľa bude myš, takže na spracovanie interakcií používajú udalosti myši. S rozmachom zariadení s dotykovou obrazovkou však používatelia na interakciu s webovými stránkami nepotrebujú myš. Je nevyhnutné podporovať celý rad vstupných zariadení, aby sa uspokojilo čo najširšie publikum.

JavaScript má novší štandard nazývaný udalosti ukazovateľa. Zvláda udalosti myši aj dotyku, takže sa nemusíte starať o ich samostatnú implementáciu.

Čo sú to udalosti ukazovateľa?

Udalosti ukazovateľa sú webovým štandardom, ktorý definuje jednotný spôsob spracovania rôznych metód vstupu vo webovom prehliadači vrátane myši, dotyku a pera. Tieto udalosti poskytujú konzistentný a na platforme nezávislý spôsob interakcie s webovým obsahom naprieč rôznymi zariadeniami.

Stručne povedané, udalosti ukazovateľa vám pomôžu zvládnuť túto skupinu používateľských interakcií bez ohľadu na zdroj.

Typy udalostí ukazovateľa

Udalosti ukazovateľa sú pomenované podobne ako udalosti myši, ktoré už možno poznáte. Pre každého mouseEvent v JavaScripte existuje zodpovedajúci pointerEvent. To znamená, že sa môžete vrátiť k svojmu starému kódu a prepnúť „myš“ za „ukazovateľ“, aby ste začali podporovať vstupy dotykom a perom.

Nasledujúca tabuľka zobrazuje rôzne udalosti ukazovateľa v porovnaní s udalosťami myši:

Môžete vidieť, že existujú tri udalosti ukazovateľa navyše bez zodpovedajúcich udalostí myši. O týchto udalostiach sa dozviete neskôr.

Používanie udalostí ukazovateľa v JavaScripte

Udalosti ukazovateľa môžete použiť rovnakým spôsobom ako udalosti myši. Ako väčšina spracovania udalostí, proces sa zvyčajne riadi týmto vzorom:

1. Použite selektor DOM získať prvok.
2. Pomocou addEventListener zadajte udalosť, o ktorú máte záujem, a funkciu spätného volania.
3. Použite vlastnosti a metódy argumentu spätného volania, an Udalosť objekt.

Tu je príklad použitia udalosti 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 cieľový prvok a funkcia JavaScript zvládnuť ukazovateľ pohybu udalosť potom používa a Prijímač udalostí JavaScript na pripojenie udalosti ukazovateľa a funkcie k cieľovému prvku.

Pomocou tohto kódu prvok s „cieľovým“ ID zobrazí súradnice ukazovateľa, keď naň prejdete kurzorom, prstom alebo perom:

Rovnakým spôsobom môžete použiť ostatné udalosti ukazovateľa.

Ukazovateľ zrušiť udalosť

Udalosť pointercancel sa spustí, keď sa preruší iná udalosť ukazovateľa predtým, ako dokončí svoju operáciu, ako bolo pôvodne zamýšľané. Za normálnych okolností prehliadač zruší akúkoľvek udalosť ukazovateľa, ktorá mohla byť predtým v akcii. Existuje veľa dôvodov, prečo a ukazovateľ zrušiť udalosť môže spustiť napríklad:

• Keď používateľ prijme telefonický hovor alebo iné prerušujúce upozornenie pri presúvaní prvku po obrazovke.
• Keď sa zmení orientácia zariadenia.
• Keď okno prehliadača stratí zameranie.
• Keď sa používateľ prepne na inú kartu alebo aplikáciu.

S ukazovateľ zrušiť udalosti, môžete tieto situácie riešiť akokoľvek chcete. Tu je prí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);
});

Zachytenie ukazovateľa

Zachytenie ukazovateľa je funkcia, ktorá umožňuje špecifické HTML prvok zachytiť a reagovať na všetky udalosti ukazovateľa pre konkrétny ukazovateľ, aj keď tieto udalosti nastanú mimo hraníc prvku.

Môžete nastaviť zachytenie ukazovateľa pre prvok pomocou setpointercapture() a uvoľnite zachytenie ukazovateľa pomocou releasepointercapture() metóda.

The gotpointercapture a zachytenie strateného ukazovateľa Udalosti ukazovateľa sú užitočné na zachytávanie ukazovateľa.

Udalosť gotpointercapture

The gotpointercapture udalosť sa spustí vždy, keď prvok získa zachytenie ukazovateľa. Túto udalosť môžete použiť na inicializáciu stavu pre váš element HTML na spracovanie udalostí ukazovateľa. Napríklad v aplikácii na kreslenie môžete použiť gotpointercapture udalosť na nastavenie počiatočnej polohy kurzora.

Udalosť zachytenia strateného bodu

The zachytenie strateného ukazovateľa udalosť sa spustí, keď prvok stratí zachytenie ukazovateľa. Môžete ho použiť na vyčistenie alebo odstránenie akéhokoľvek stavu vytvoreného, ​​keď prvok získal zachytenie ukazovateľa. V aplikácii na kreslenie možno budete chcieť použiť zachytenie strateného ukazovateľa skryjete kurzor.

Vlastnosti udalostí ukazovateľa

Udalosti ukazovateľa majú vlastnosti, ktoré vám pomôžu urobiť vašu webovú stránku interaktívnejšou a pohotovejšou. Vlastnosti udalostí myši sú rovnaké, aké nájdete v udalostiach ukazovateľa, plus niektoré ďalšie vlastnosti. Tento článok vysvetľuje niektoré ďalšie vlastnosti.

Vlastnosť pointerId

The pointerId je vlastnosť udalosti ukazovateľa, ktorá vám pomáha identifikovať každý jedinečný vstup ukazovateľa, ako je dotykové pero, prst alebo myš. Každý vstup ukazovateľa dostane jedinečné ID (automaticky vygenerované prehliadačom), ktoré vám umožní sledovať a vykonávať s ním operácie.

Skvelé využitie pre pointerId property je herná aplikácia, kde používatelia súčasne používajú viacero prstov alebo stylusov. The pointerId vlastnosť vám umožňuje sledovať každý povrch ukazovateľa priradením jedinečného ID každému z nich. Primárne ID sa priradí k prvému vstupu ukazovateľa.

Táto vlastnosť je užitočná najmä pre dotykové zariadenia. Zariadenia, ktoré sa spoliehajú na ukazovatele myši, môžu mať naraz iba jeden vstup ukazovateľa bez toho, aby k nim bolo pripojené nejaké externé zariadenie.

Tu je jednoduchý príklad, ktorý vytlačí ID každého vstupu ukazovateľa 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
});

Vlastnosť pointerType

Vlastnosť pointerType vám pomáha rozlišovať medzi rôznymi typmi vstupov ukazovateľa a umožňuje vám vykonávať operácie založené na nich. Môžete rozlišovať medzi myšou, perom a dotykom prsta. Táto vlastnosť môže mať iba jeden z troch reťazcových vstupov: „myš“, „pero“ alebo „dotyk“. Tu je jednoduchý príklad, ako použiť pointerType nehnuteľnosť:

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 šírky a výšky

Tieto vlastnosti predstavujú šírku a výšku kontaktnej plochy ukazovateľa v milimetroch. Niektoré prehliadače ich nepodporujú a ich hodnota bude v takýchto prehliadačoch vždy 1.

Dobrý prípad použitia týchto vlastností bude v aplikáciách, ktoré vyžadujú presné zadanie alebo potrebujú rozlišovať medzi veľkosťami rôznych vstupov. Napríklad v aplikácii na kreslenie môže väčšia výška a šírka znamenať, že používateľ kreslí širším ťahom a naopak.

Vo väčšine prípadov budete pravdepodobne používať vlastnosti šírky a výšky pre dotykové udalosti.

Použite Ukazovateľské udalosti pre väčšiu inkluzívnosť

Udalosti ukazovateľa vám umožňujú uspokojiť širokú škálu zariadení a typov vstupov bez toho, aby ste museli prejsť veľkým stresom. Vždy by ste ich mali používať vo svojich aplikáciách, aby vyhovovali moderným štandardom a pomohli vybudovať lepší web.