Kako koristiti događaje pokazivača u JavaScriptu

Ključni zahvati

• Web aplikacije bi trebale podržavati niz ulaznih uređaja, a ne samo miš, kako bi zadovoljile širu publiku.
• Događaji pokazivača u JavaScriptu obrađuju i događaje miša i dodira, eliminirajući potrebu za njihovom zasebnom implementacijom.
• Događaji pokazivača imaju slične nazive i funkcionalnost kao događaji miša, što olakšava ažuriranje postojećeg koda za podršku unosa dodirom i olovkom.

Mnoge web aplikacije pretpostavljaju da će korisnikov pokazivački uređaj biti miš, pa koriste događaje miša za rukovanje interakcijama. Međutim, s porastom uređaja sa zaslonom osjetljivim na dodir, korisnicima nije potreban miš za interakciju s web stranicama. Bitno je podržati niz ulaznih uređaja kako bi se zadovoljila najšira moguća publika.

JavaScript ima noviji standard koji se zove događaji pokazivača. Obrađuje događaje miša i dodira, tako da ne morate brinuti o njihovoj zasebnoj implementaciji.

Što su događaji pokazivača?

Događaji pokazivača web su standard koji definira unificirani način rukovanja različitim metodama unosa u web pregledniku, uključujući miš, dodir i olovku. Ovi događaji pružaju dosljedan način interakcije s web sadržajem na različitim uređajima neovisan o platformi.

Ukratko, događaji pokazivača pomažu vam pri rukovanju ovom skupinom korisničkih interakcija, bez obzira na izvor.

Vrste događaja pokazivača

Događaji pokazivača nazivaju se slično događajima miša s kojima ste možda već upoznati. Za svaki mouseEvent u JavaScriptu postoji odgovarajući pointerEvent. To znači da možete ponovno pregledati svoj stari kod i zamijeniti "miš" za "pokazivač" kako biste počeli podržavati unose dodirom i olovkom.

Sljedeća tablica prikazuje različite događaje pokazivača u usporedbi s događajima miša:

Možete vidjeti da postoje tri dodatna događaja pokazivača bez odgovarajućih događaja miša. Kasnije ćete saznati o tim događajima.

Korištenje događaja pokazivača u JavaScriptu

Događaje pokazivača možete koristiti na isti način kao i događaje miša. Kao i većina rukovanja događajima, proces obično slijedi ovaj obrazac:

1. Koristite selektor DOM-a dohvatiti element.
2. Koristiti addEventListener način, odredite događaj koji vas zanima i funkciju povratnog poziva.
3. Koristite svojstva i metode argumenta povratnog poziva, an Događaj objekt.

Evo primjera korištenja događaja 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}`;
}

Ovaj blok koda definira ciljni element i JavaScript funkcija nositi se s pomicanje pokazivača događaj tada koristi a JavaScript slušatelj događaja priložiti događaj pokazivača i funkciju ciljnom elementu.

Koristeći ovaj kod, element s ID-om "cilja" prikazat će koordinate pokazivača kada pomaknete kursor, prst ili olovku preko njega:

Na isti način možete koristiti druge događaje pokazivača.

Događaj poništavanja pokazivača

Događaj otkazivanja pokazivača pokreće se kada se drugi događaj pokazivača prekine prije nego što dovrši svoju operaciju kao što je prvobitno planirano. Uobičajeno, preglednik poništava bilo koji događaj pokazivača koji je možda bio u akciji prije. Mnogo je razloga zašto a poništiti pokazivač događaj može pokrenuti, na primjer:

• Kada korisnik primi telefonski poziv ili neku drugu ometajuću obavijest dok povlači element po ekranu.
• Kada se promijeni orijentacija uređaja.
• Kada prozor preglednika izgubi fokus.
• Kada se korisnik prebaci na drugu karticu ili aplikaciju.

s poništiti pokazivač događaja, možete se nositi s tim situacijama kako god želite. Evo primjera:

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);
});

Hvatanje pokazivača

Hvatanje pokazivača značajka je koja omogućuje određenom HTML element uhvatiti i odgovoriti na sve događaje pokazivača za određeni pokazivač, čak i ako se ti događaji dogode izvan granica elementa.

Možete postaviti hvatanje pokazivača za element pomoću setpointercapture() metodu i otpustite hvatanje pokazivača s releasepointercapture() metoda.

The gotpointercapture i lostpointercapture događaji pokazivača korisni su za hvatanje pokazivača.

Događaj gotpointercapture

The gotpointercapture događaj se pokreće kad god element dobije hvatanje pokazivača. Ovaj događaj možete koristiti za inicijaliziranje stanja za vaš HTML element za rukovanje događajima pokazivača. Na primjer, u aplikaciji za crtanje možete koristiti gotpointercapture događaj za postavljanje početne pozicije kursora.

Događaj lostpointercapture

The lostpointercapture događaj se pokreće kada element izgubi hvatanje pokazivača. Možete ga koristiti za čišćenje ili uklanjanje bilo kojeg stanja stvorenog kada je element dobio hvatanje pokazivača. U aplikaciji za crtanje, možda biste željeli koristiti lostpointercapture da sakrijete kursor.

Svojstva događaja pokazivača

Događaji pokazivača imaju svojstva koja će vam pomoći da svoju web stranicu učinite interaktivnijom i responzivnijom. Svojstva događaja miša ista su svojstva koja ćete pronaći u događajima pokazivača, plus neka dodatna svojstva. Ovaj članak objašnjava neka od dodatnih svojstava.

Svojstvo pokazivača

The pokazivačId je svojstvo događaja pokazivača koje vam pomaže identificirati svaki jedinstveni unos pokazivača, poput olovke, prsta ili miša. Svaki unos pokazivača dobiva jedinstveni ID (automatski generiran od strane preglednika) koji će vam omogućiti da ih pratite i izvodite operacije na njima.

Izvrsna upotreba za pokazivačId property je igraća aplikacija u kojoj korisnici istovremeno koriste više prstiju ili olovki. The pokazivačId svojstvo vam omogućuje da pratite svaku površinu pokazivača dodjeljivanjem jedinstvenog ID-a svakoj od njih. Primarni ID se dodjeljuje prvom unosu pokazivača.

Ovo je svojstvo osobito korisno za uređaje osjetljive na dodir. Uređaji koji se oslanjaju na pokazivače miša mogu imati samo jedan unos pokazivača istovremeno bez nekog vanjskog uređaja koji je povezan s njima.

Evo jednostavnog primjera koji ispisuje ID svakog unosa pokazivača u konzolu:

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

Svojstvo pointerType

Svojstvo pointerType pomaže vam razlikovati različite vrste unosa pokazivača i omogućuje vam izvođenje operacija na temelju njih. Možete razlikovati miš, olovku i dodir prstom. Ovo svojstvo može primiti samo jedan od tri unosa niza: "miš", "olovka" ili "dodir". Evo jednostavnog primjera kako koristiti pointerType svojstvo:

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);

Svojstva širine i visine

Ova svojstva predstavljaju širinu i visinu kontaktne površine pokazivača u milimetrima. Neki preglednici ih ne podržavaju i njihova će vrijednost uvijek biti 1 u takvim preglednicima.

Dobar slučaj upotrebe ovih svojstava bit će u aplikacijama koje zahtijevaju precizan unos ili trebaju razlikovati veličine različitih unosa. Na primjer, u aplikaciji za crtanje, veća visina i širina mogu značiti da korisnik crta širim potezom i obrnuto.

U većini slučajeva vjerojatno ćete koristiti svojstva širine i visine za događaje dodira.

Koristite događaje pokazivača za veću inkluzivnost

Događaji pokazivača omogućuju vam da opskrbite širok raspon uređaja i vrsta unosa bez prolaska kroz puno stresa. Uvijek ih trebate koristiti u svojim aplikacijama kako biste bili u skladu s modernim standardima i pomogli u izgradnji boljeg weba.