Sådan bruges pointerhændelser i JavaScript

Nøgle takeaways

• Webapplikationer bør understøtte en række inputenheder, ikke kun en mus, for at henvende sig til et bredere publikum.
• Pointerhændelser i JavaScript håndterer både mus- og berøringshændelser, hvilket eliminerer behovet for at implementere dem separat.
• Pointerhændelser har lignende navne og funktionalitet som musehændelser, hvilket gør det nemt at opdatere eksisterende kode for at understøtte berørings- og peninput.

Mange webapplikationer antager, at en brugers pegeredskab vil være en mus, så de bruger musehændelser til at håndtere interaktioner. Men med fremkomsten af ​​touchscreen-enheder behøver brugere ikke en mus for at interagere med websteder. Det er vigtigt at understøtte en række input-enheder for at henvende sig til det bredest mulige publikum.

JavaScript har en nyere standard kaldet pointerhændelser. Den håndterer både mus- og berøringshændelser, så du ikke behøver at bekymre dig om at implementere dem separat.

Hvad er pointer-begivenheder?

Pointerhændelser er en webstandard, der definerer en samlet måde at håndtere forskellige inputmetoder i en webbrowser på, herunder mus, berøring og pen. Disse begivenheder giver en konsistent og platformsuafhængig måde at interagere med webindhold på på tværs af forskellige enheder.

Kort fortalt hjælper pointerhændelser dig med at håndtere denne gruppe af brugerinteraktioner, uanset kilden.

Typer af pointerhændelser

Pegehændelser er navngivet på samme måde som de musebegivenheder, du måske allerede er bekendt med. For hver musEvent i JavaScript er der en tilsvarende pointerEvent. Det betyder, at du kan gense din gamle kode og skifte "mus" til "markør" for at begynde at understøtte berørings- og peninput.

Følgende tabel viser de forskellige markørhændelser sammenlignet med musehændelser:

Du kan se, at der er tre ekstra markørhændelser uden tilsvarende musehændelser. Du lærer om disse begivenheder senere.

Brug af pointerhændelser i JavaScript

Du kan bruge markørhændelser på samme måde, som du bruger musehændelser. Som de fleste begivenhedshåndtering følger processen normalt dette mønster:

1. Brug en DOM-vælger at hente et element.
2. Bruger addEventListener metode, angiv den begivenhed, du er interesseret i, og en tilbagekaldsfunktion.
3. Brug egenskaber og metoder for tilbagekaldets argument, en Begivenhed objekt.

Her er et eksempel, der bruger pointermove-begivenheden:

// 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 kodeblok definerer et målelement og en JavaScript-funktion at håndtere pointermove begivenhed, så bruger den en JavaScript-begivenhedslytter at knytte pointerhændelsen og funktionen til målelementet.

Ved at bruge denne kode vil et element med et "mål"-id vise markørkoordinaterne, når du flytter din markør, finger eller pen hen over det:

Du kan bruge de andre pointerhændelser på samme måde.

Markøren annullerer begivenhed

Pointercancel-hændelsen udløses, når en anden pointerhændelse afbrydes, før den fuldfører sin operation som oprindeligt tilsigtet. Normalt annullerer browseren enhver pointerhændelse, der måtte have været i aktion før. Der er mange grunde til, at en pointerannuller hændelse kan udløse, for eksempel:

• Når en bruger modtager et telefonopkald eller en anden forstyrrende notifikation, mens han trækker et element hen over skærmen.
• Når enhedens retning ændres.
• Når browservinduet mister fokus.
• Når brugeren skifter til en anden fane eller applikation.

Med pointerannuller begivenhed, kan du håndtere disse situationer, som 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);
});

Pointer Capturing

Pointer capture er en funktion, der lader en bestemt HTML element fange og reagere på alle pointerhændelser for en bestemt pointer, selvom disse hændelser forekommer uden for elementets grænse.

Du kan indstille en pointer capture for et element med setpointercapture() metode og frigiv en pointer capture med releasepointercapture() metode.

Det gotpointercapture og lostpointercapture pointerhændelser er nyttige til pointer capture.

gotpointercapture-begivenheden

Det gotpointercapture hændelse udløses, når et element opnår pointer capture. Du kan bruge denne hændelse til at initialisere en tilstand for dit HTML-element til at håndtere pointerhændelser. I en tegneapplikation kan du f.eks. bruge gotpointercapture hændelse for at indstille markørens startposition.

Lostpointercapture-begivenheden

Det lostpointercapture hændelse udløses, når et element mister pointer capture. Du kan bruge den til at rydde op eller fjerne enhver tilstand, der blev oprettet, da elementet fik pointer capture. I en tegneapplikation vil du måske bruge lostpointercapture for at skjule markøren.

Egenskaber for pointerhændelser

Pointer-begivenheder har egenskaber, der hjælper dig med at gøre dit websted mere interaktivt og responsivt. Egenskaberne for musehændelser er de samme egenskaber, som du finder i pointerhændelser, plus nogle yderligere egenskaber. Denne artikel forklarer nogle af de yderligere egenskaber.

pointerId egenskaben

Det pointerId er en markørhændelsesegenskab, der hjælper dig med at identificere hvert unikt markørinput, såsom stylus, finger eller mus. Hvert pointerinput får et unikt ID (autogenereret af browseren), som giver dig mulighed for at spore og udføre handlinger på dem.

En stor brug for pointerId property er en spilapplikation, hvor brugere bruger flere fingre eller penne samtidigt. Det pointerId egenskab giver dig mulighed for at holde styr på hver markørflade ved at tildele et unikt ID til hver af dem. Det primære ID bliver tildelt til det første pointerinput.

Denne egenskab er især nyttig for berøringsenheder. Enheder, der er afhængige af musemarkører, kan kun have én pegepind ad gangen, uden at der er tilsluttet en ekstern enhed til dem.

Her er et simpelt eksempel, der udskriver ID'et for hver pointerinput 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-egenskaben

Egenskaben pointerType hjælper dig med at skelne mellem de forskellige typer pointer-input og lader dig udføre handlinger baseret på dem. Du kan skelne mellem en mus, en pen og en fingerberøring. Denne egenskab kan kun tage én af tre strenginput: "mus", "pen" eller "touch". Her er et simpelt eksempel på, hvordan du bruger pointerType ejendom:

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øjde Egenskaber

Disse egenskaber repræsenterer bredden og højden af ​​markørens kontaktområde i millimeter. Nogle browsere understøtter dem ikke, og deres værdi vil altid være 1 i sådanne browsere.

En god brugssag for disse egenskaber vil være i applikationer, der kræver præcis input eller skal skelne mellem størrelserne af forskellige input. For eksempel i en tegneapplikation kan en større højde og bredde betyde, at brugeren tegner med et bredere streg og omvendt.

De fleste gange vil du sandsynligvis bruge egenskaberne for bredde og højde til berøringsbegivenheder.

Brug Pointer-begivenheder for mere inklusivitet

Pointer-begivenheder giver dig mulighed for at tage højde for en bred vifte af enheder og inputtyper uden at gå igennem en masse stress. Du bør altid bruge dem i dine applikationer for at overholde moderne standarder og hjælpe med at opbygge et bedre web.