Slik bruker du pekerhendelser i JavaScript

Viktige takeaways

• Nettapplikasjoner bør støtte en rekke inndataenheter, ikke bare en mus, for å imøtekomme et bredere publikum.
• Pekerhendelser i JavaScript håndterer både mus- og berøringshendelser, og eliminerer behovet for å implementere dem separat.
• Pekerhendelser har lignende navn og funksjonalitet som musehendelser, noe som gjør det enkelt å oppdatere eksisterende kode for å støtte berørings- og penninnganger.

Mange nettapplikasjoner antar at en brukers pekeenhet vil være en mus, så de bruker musehendelser til å håndtere interaksjoner. Men med fremveksten av berøringsskjermenheter, trenger ikke brukere en mus for å samhandle med nettsteder. Det er viktig å støtte en rekke inndataenheter for å imøtekomme et bredest mulig publikum.

JavaScript har en nyere standard kalt pekerhendelser. Den håndterer både mus- og berøringshendelser, så du trenger ikke å bekymre deg for å implementere dem separat.

Hva er Pointer Events?

Pekerhendelser er en nettstandard som definerer en enhetlig måte å håndtere ulike inndatametoder i en nettleser, inkludert mus, berøring og penn. Disse hendelsene gir en konsistent og plattformuavhengig måte å samhandle med nettinnhold på tvers av forskjellige enheter.

I et nøtteskall hjelper pekerhendelser deg med å håndtere denne gruppen av brukerinteraksjoner, uavhengig av kilden.

Typer pekerhendelser

Pekerhendelser er navngitt på samme måte som musehendelser du kanskje allerede er kjent med. For hver musEvent i JavaScript er det en tilsvarende pointerEvent. Dette betyr at du kan gå tilbake til den gamle koden din og bytte "mus" for "peker" for å begynne å støtte berørings- og penninnganger.

Følgende tabell viser de forskjellige pekerhendelsene sammenlignet med musehendelser:

Du kan se at det er tre ekstra pekerhendelser uten tilsvarende musehendelser. Du vil lære om disse hendelsene senere.

Bruke Pointer Events i JavaScript

Du kan bruke pekerhendelser på samme måte som du bruker musehendelser. Som de fleste hendelseshåndtering følger prosessen vanligvis dette mønsteret:

1. Bruk en DOM-velger for å hente et element.
2. Bruker addEventListener metoden, spesifiser hendelsen du er interessert i og en tilbakeringingsfunksjon.
3. Bruk egenskaper og metoder for tilbakeringingsargumentet, en Begivenhet gjenstand.

Her er et eksempel som bruker pointermove-hendelsen:

// 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}`;
}

Denne kodeblokken definerer et målelement og en JavaScript-funksjon å håndtere pekerbevegelse hendelse så bruker den en JavaScript-hendelseslytter for å feste pekerhendelsen og funksjonen til målelementet.

Ved å bruke denne koden vil et element med en "mål"-ID vise pekerkoordinatene når du flytter markøren, fingeren eller pennen over den:

Du kan bruke de andre pekerhendelsene på samme måte.

Pekeravbryter hendelse

Pointercancel-hendelsen utløses når en annen pekerhendelse blir avbrutt før den fullfører operasjonen som opprinnelig var beregnet. Vanligvis avbryter nettleseren enhver pekerhendelse som kan ha vært i aksjon før. Det er mange grunner til at en pekeravbryt hendelsen kan utløse, for eksempel:

• Når en bruker mottar en telefonsamtale eller et annet forstyrrende varsel mens han drar et element over skjermen.
• Når enhetens retning endres.
• Når nettleservinduet mister fokus.
• Når brukeren bytter til en annen fane eller applikasjon.

Med pekeravbryt hendelse, kan du håndtere disse situasjonene slik du vil. Her er et eksempel:

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

Pekerfangst

Pekerfangst er en funksjon som lar en bestemt HTML-element fange opp og svare på alle pekerhendelser for en bestemt peker, selv om disse hendelsene skjer utenfor elementets grense.

Du kan angi en pekerfangst for et element med setpointercapture() metoden og slipp en pekerfangst med releasepointercapture() metode.

De gotpointercapture og tapt pointerfangst pekerhendelser er nyttige for pekerfangst.

gotpointercapture-hendelsen

De gotpointercapture hendelsen utløses når et element får pekerfangst. Du kan bruke denne hendelsen til å initialisere en tilstand for HTML-elementet ditt for å håndtere pekerhendelser. For eksempel, i en tegneapplikasjon kan du bruke gotpointercapture hendelse for å angi startposisjonen til markøren.

Lostpointercapture-hendelsen

De tapt pointerfangst hendelsen utløses når et element mister pekerfangst. Du kan bruke den til å rydde opp eller fjerne enhver tilstand som ble opprettet da elementet fikk pekerfangst. I en tegneapplikasjon kan det være lurt å bruke tapt pointerfangst for å skjule markøren.

Egenskaper for pekerhendelser

Pekerhendelser har egenskaper som vil hjelpe deg å gjøre nettstedet ditt mer interaktivt og responsivt. Egenskapene til musehendelser er de samme egenskapene du finner i pekerhendelser, pluss noen tilleggsegenskaper. Denne artikkelen forklarer noen av tilleggsegenskapene.

PointerId-egenskapen

De pointerId er en pekerhendelsesegenskap som hjelper deg med å identifisere hver unike pekerinngang, for eksempel pekepenn, finger eller mus. Hver pekerinngang får en unik ID (autogenerert av nettleseren) som lar deg spore og utføre operasjoner på dem.

En flott bruk for pointerId property er en spillapplikasjon der brukere bruker flere fingre eller pekepenner samtidig. De pointerId egenskap lar deg holde styr på hver pekeflate ved å tilordne en unik ID til hver av dem. Den primære IDen blir tildelt den første pekerinngangen.

Denne egenskapen er spesielt nyttig for berøringsenheter. Enheter som er avhengige av musepekere kan bare ha én pekerinngang om gangen uten at noen ekstern enhet er koblet til dem.

Her er et enkelt eksempel som skriver ut IDen til hver pekerinngang til konsollen:

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

PointerType-egenskapen

PointerType-egenskapen hjelper deg å skille mellom de forskjellige typene pekerinndata og lar deg utføre operasjoner basert på dem. Du kan skille mellom en mus, en penn og en fingerberøring. Denne egenskapen kan bare ta en av tre strenginndata: "mus", "penn" eller "berøring". Her er et enkelt eksempel på hvordan du bruker pointerType eiendom:

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

Bredde og høyde Egenskaper

Disse egenskapene representerer bredden og høyden til pekerens kontaktområde i millimeter. Noen nettlesere støtter dem ikke, og verdien vil alltid være 1 i slike nettlesere.

Et godt bruksområde for disse egenskapene vil være i applikasjoner som krever presise input, eller trenger å skille mellom størrelsene på forskjellige input. For eksempel, i en tegneapplikasjon, kan en større høyde og bredde bety at brukeren tegner med et bredere slag og omvendt.

De fleste ganger vil du sannsynligvis bruke bredde- og høydeegenskapene for berøringshendelser.

Bruk Pointer Events for mer inklusivitet

Pekerhendelser lar deg imøtekomme et bredt spekter av enheter og inngangstyper uten å gå gjennom mye stress. Du bør alltid bruke dem i applikasjonene dine for å samsvare med moderne standarder og bidra til å bygge et bedre nett.