Cum să utilizați evenimentele pointer în JavaScript

Recomandări cheie

• Aplicațiile web ar trebui să accepte o serie de dispozitive de intrare, nu doar un mouse, pentru a răspunde unui public mai larg.
• Evenimentele pointer din JavaScript gestionează atât evenimentele mouse-ului, cât și evenimentele tactile, eliminând necesitatea implementării lor separat.
• Evenimentele pointer au nume și funcționalități similare cu cele ale mouse-ului, ceea ce facilitează actualizarea codului existent pentru a accepta introducerea tactilă și a creionului.

Multe aplicații web presupun că dispozitivul de indicare al unui utilizator va fi un mouse, așa că folosesc evenimentele mouse-ului pentru a gestiona interacțiuni. Cu toate acestea, odată cu creșterea dispozitivelor cu ecran tactil, utilizatorii nu au nevoie de un mouse pentru a interacționa cu site-urile web. Este esențial să sprijiniți o gamă largă de dispozitive de intrare pentru a răspunde celui mai larg public posibil.

JavaScript are un standard mai nou numit evenimente pointer. Se ocupă atât de evenimentele mouse-ului, cât și de tactile, astfel încât nu trebuie să vă faceți griji cu privire la implementarea lor separat.

Ce sunt evenimentele pointer?

Evenimentele pointer sunt un standard web care definește un mod unificat de a gestiona diferite metode de introducere într-un browser web, inclusiv mouse, atingere și creion. Aceste evenimente oferă o modalitate consistentă și independentă de platformă de a interacționa cu conținutul web pe diferite dispozitive.

Pe scurt, evenimentele pointer vă ajută să gestionați acest grup de interacțiuni ale utilizatorilor, indiferent de sursă.

Tipuri de evenimente pointer

Evenimentele pointer sunt denumite în mod similar cu evenimentele mouse-ului cu care este posibil să fiți deja familiarizat. Pentru fiecare mouseEvent în JavaScript, există o corespondență pointerEvent. Aceasta înseamnă că puteți să vă revedeți vechiul cod și să comutați „mouse” la „pointer” pentru a începe să acceptați introducerea tactilă și a creionului.

Următorul tabel arată diferitele evenimente pointer în comparație cu evenimentele mouse-ului:

Puteți vedea că există trei evenimente de tip pointer suplimentare fără evenimentele de mouse corespunzătoare. Veți afla despre aceste evenimente mai târziu.

Utilizarea Pointer Events în JavaScript

Puteți utiliza evenimentele pointer în același mod în care utilizați evenimentele mouse-ului. La fel ca majoritatea gestionării evenimentelor, procesul urmează de obicei acest model:

1. Utilizați un selector DOM pentru a prelua un element.
2. Folosind addEventListener metoda, specificați evenimentul de care sunteți interesat și o funcție de apel invers.
3. Utilizați proprietățile și metodele argumentului callback-ului, an Eveniment obiect.

Iată un exemplu de utilizare a evenimentului 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}`;
}

Acest bloc de cod definește un element țintă și o funcție JavaScript să se ocupe de pointermove eveniment, atunci folosește a Ascultător de evenimente JavaScript pentru a atașa evenimentul pointer și funcția la elementul țintă.

Folosind acest cod, un element cu un ID „țintă” va afișa coordonatele indicatorului atunci când mutați cursorul, degetul sau stiloul peste el:

Puteți utiliza celelalte evenimente pointer în același mod.

Evenimentul pointercancel

Evenimentul pointercancel este declanșat atunci când un alt eveniment pointer este întrerupt înainte de a-și finaliza funcționarea așa cum s-a intenționat inițial. În mod normal, browserul anulează orice eveniment pointer ar fi fost în acțiune înainte. Există multe motive pentru care a pointercancel evenimentul poate declanșa, de exemplu:

• Când un utilizator primește un apel telefonic sau o altă notificare de întrerupere în timp ce trage un element pe ecran.
• Când se schimbă orientarea dispozitivului.
• Când fereastra browserului își pierde focalizarea.
• Când utilizatorul trece la o altă filă sau aplicație.

Cu pointercancel eveniment, puteți gestiona aceste situații cum doriți. Iată un exemplu:

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

Captură pointer

Captarea pointerului este o caracteristică care permite un anumit element HTML capturați și răspundeți la toate evenimentele pointer pentru un anumit pointer, chiar dacă acele evenimente apar în afara graniței elementului.

Puteți seta o captură de indicator pentru un element cu ajutorul setpointercapture() metoda și eliberați o captură de pointer cu releasepointercapture() metodă.

The gotpointercapture și lostpointercapture evenimentele pointer sunt utile pentru capturarea pointerului.

Evenimentul gotpointercapture

The gotpointercapture evenimentul este declanșat ori de câte ori un element obține captarea pointerului. Puteți utiliza acest eveniment pentru a inițializa o stare pentru elementul HTML pentru a gestiona evenimentele pointer. De exemplu, într-o aplicație de desen, puteți utiliza gotpointercapture eveniment pentru a seta poziția inițială a cursorului.

Evenimentul lostpointercapture

The lostpointercapture evenimentul este declanșat atunci când un element pierde captarea pointerului. Îl puteți folosi pentru a curăța sau elimina orice stare creată atunci când elementul a obținut captarea pointerului. Într-o aplicație de desen, poate doriți să utilizați lostpointercapture pentru a ascunde cursorul.

Proprietăți ale evenimentelor Pointer

Evenimentele pointer au proprietăți care vă vor ajuta să vă faceți site-ul mai interactiv și mai receptiv. Proprietățile evenimentelor mouse-ului sunt aceleași proprietăți pe care le veți găsi în evenimentele pointer, plus unele proprietăți suplimentare. Acest articol explică unele dintre proprietățile suplimentare.

Proprietatea pointerId

The pointerId este o proprietate de eveniment indicator care vă ajută să identificați fiecare intrare unică de indicator, cum ar fi stiloul, degetul sau mouse-ul. Fiecare intrare de indicator primește un ID unic (generat automat de browser) care vă va permite să urmăriți și să efectuați operațiuni asupra lor.

O mare utilizare pentru pointerId property este o aplicație de jocuri în care utilizatorii folosesc simultan mai multe degete sau stilouri. The pointerId proprietatea vă permite să urmăriți fiecare suprafață de indicator prin atribuirea unui ID unic fiecăruia dintre ele. ID-ul primar este atribuit primei intrări de indicator.

Această proprietate este utilă în special pentru dispozitivele tactile. Dispozitivele care se bazează pe pointerii mouse-ului pot avea o singură intrare de indicator la un moment dat, fără un dispozitiv extern conectat la ele.

Iată un exemplu simplu care imprimă ID-ul fiecărei intrări de pointer în consolă:

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

Proprietatea pointerType

Proprietatea pointerType vă ajută să distingeți între diferitele tipuri de intrări de pointer și vă permite să efectuați operații bazate pe acestea. Puteți face diferența între un mouse, un stilou și o atingere cu degetul. Această proprietate poate lua doar una dintre cele trei intrări de șir: „mouse”, „pen” sau „touch”. Iată un exemplu simplu despre cum se utilizează pointerType proprietate:

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

Proprietățile lățimii și înălțimii

Aceste proprietăți reprezintă lățimea și înălțimea zonei de contact a indicatorului în milimetri. Unele browsere nu le acceptă, iar valoarea lor va fi întotdeauna 1 în astfel de browsere.

Un bun caz de utilizare pentru aceste proprietăți va fi în aplicațiile care necesită o introducere precisă sau care trebuie să facă diferența între dimensiunile diferitelor intrări. De exemplu, într-o aplicație de desen, o înălțime și lățime mai mari ar putea însemna că utilizatorul desenează cu o contur mai largă și invers.

De cele mai multe ori, probabil că veți folosi proprietățile de lățime și înălțime pentru evenimentele tactile.

Utilizați Evenimente Pointer pentru mai multă incluziune

Evenimentele pointer vă permit să răspundeți la o gamă largă de dispozitive și tipuri de intrare fără a trece prin mult stres. Ar trebui să le utilizați întotdeauna în aplicațiile dvs. pentru a vă conforma standardelor moderne și pentru a ajuta la construirea unui web mai bun.