Kuidas kasutada kursori sündmusi JavaScriptis

Võtmed kaasavõtmiseks

• Veebirakendused peaksid toetama mitmesuguseid sisendseadmeid, mitte ainult hiirt, et teenindada laiemat vaatajaskonda.
• JavaScripti kursorisündmused käsitlevad nii hiire- kui ka puutesündmusi, välistades vajaduse neid eraldi rakendada.
• Kursorisündmustel on hiiresündmustega sarnased nimed ja funktsionaalsus, mis muudab olemasoleva koodi värskendamise lihtsaks, et toetada puute- ja pliiatsisisendeid.

Paljud veebirakendused eeldavad, et kasutaja osutusseade on hiir, seega kasutavad nad interaktsioonide haldamiseks hiiresündmusi. Puuteekraaniga seadmete leviku tõttu ei vaja kasutajad veebisaitidega suhtlemiseks hiirt. Oluline on toetada mitmesuguseid sisendseadmeid, et rahuldada võimalikult laia publikut.

JavaScriptil on uuem standard, mida nimetatakse osuti sündmusteks. See käsitleb nii hiire- kui ka puutetundlikke sündmusi, nii et te ei pea muretsema nende eraldi rakendamise pärast.

Mis on osuti sündmused?

Osutisündmused on veebistandard, mis määratleb ühtse viisi veebibrauseris erinevate sisestusmeetodite (sh hiir, puute ja pliiats) käsitlemiseks. Need sündmused pakuvad järjepidevat ja platvormist sõltumatut viisi veebisisuga suhtlemiseks erinevates seadmetes.

Lühidalt, osutisündmused aitavad teil seda kasutajate interaktsioonide rühma hallata, olenemata allikast.

Osutisündmuste tüübid

Kursori sündmuste nimed on sarnased hiire sündmustega, millega võite juba tuttavad olla. Iga jaoks hiiresündmus JavaScriptis on vastav pointerEvent. See tähendab, et saate puute- ja pliiatsisisestuse toetamiseks uuesti vaadata oma vana koodi ja vahetada hiire „kursori” vastu.

Järgmine tabel näitab erinevaid kursori sündmusi võrreldes hiire sündmustega:

Näete, et ilma vastavate hiiresündmusteta on kolm lisakursori sündmust. Nende sündmuste kohta saate hiljem teada.

Osuti sündmuste kasutamine JavaScriptis

Kursori sündmusi saate kasutada samamoodi nagu hiiresündmusi. Nagu enamik sündmuste käitlemist, järgib protsess tavaliselt järgmist mustrit:

1. Kasutage DOM-i valijat elemendi toomiseks.
2. Kasutades addEventListener meetodit, määrake sündmus, millest olete huvitatud, ja tagasihelistamise funktsioon.
3. Kasutage tagasihelistamise argumendi atribuute ja meetodeid, an Sündmus objektiks.

Siin on näide pointermove sündmuse kasutamisest:

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

See koodiplokk määratleb sihtelemendi ja JavaScripti funktsioon käsitlema pointermove sündmus, siis kasutab see a JavaScripti sündmuste kuulaja kursori sündmuse ja funktsiooni sihtelemendile kinnitamiseks.

Seda koodi kasutades kuvab sihtmärgi ID-ga element kursori koordinaadid, kui liigutate kursori, sõrme või pliiatsi üle selle:

Samal viisil saate kasutada ka teisi osuti sündmusi.

Osutitühista sündmus

Osuti tühistamise sündmus käivitub, kui mõni muu osuti sündmus katkestatakse enne, kui see algselt kavandatud toimimise lõpetab. Tavaliselt tühistab brauser kõik osutisündmused, mis võisid varem toimida. Põhjuseid, miks a osutitühista sündmus võib käivitada näiteks:

• Kui kasutaja saab telefonikõne või mõne muu katkestava teate, lohistades elementi üle ekraani.
• Kui seadme suund muutub.
• Kui brauseriaken kaotab fookuse.
• Kui kasutaja lülitub teisele vahelehele või rakendusele.

Koos osutitühista sündmuse puhul saate nende olukordadega hakkama, kuidas soovite. Siin on näide:

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

Kursori jäädvustamine

Kursori jäädvustamine on funktsioon, mis võimaldab konkreetset HTML element jäädvustada ja vastata konkreetse kursori kõikidele osuti sündmustele, isegi kui need sündmused toimuvad väljaspool elemendi piire.

Saate määrata elemendile kursori jäädvustamise nupuga setpointercapture() meetodit ja vabastage kursorpüüdmine nupuga releasepointercapture() meetod.

The sain pointer capture ja kadunud pointercture kursori sündmused on kasulikud kursori jäädvustamiseks.

Gotpointercapture'i sündmus

The sain pointer capture sündmus käivitub alati, kui element saavutab osuti püüdmise. Saate seda sündmust kasutada HTML-elemendi oleku lähtestamiseks, et käsitleda kursorisündmusi. Näiteks joonistusrakenduses saate kasutada sain pointer capture sündmus kursori algse asukoha määramiseks.

Kaotatud pointercapture'i sündmus

The kadunud pointercture sündmus käivitub, kui element kaotab kursori püüdmise. Saate seda kasutada mis tahes oleku puhastamiseks või eemaldamiseks, mis tekkis siis, kui element sai kursori püüdmise. Joonistusrakenduses võiksite kasutada kadunud pointercture kursori peitmiseks.

Osuti sündmuste omadused

Osutisündmustel on omadused, mis aitavad teil muuta veebisaidi interaktiivsemaks ja reageerivamaks. Hiiresündmuste omadused on samad, mida leiate kursorisündmuste puhul, pluss mõned lisaatribuudid. See artikkel selgitab mõningaid täiendavaid omadusi.

Atribuut pointerId

The pointerId on kursorisündmuse atribuut, mis aitab tuvastada iga kordumatu kursori sisendi, nagu pliiats, sõrm või hiir. Iga kursori sisend saab kordumatu ID (selle loob automaatselt brauser), mis võimaldab teil seda jälgida ja sellega toiminguid teha.

Suurepärane kasutamine pointerId property on mängurakendus, kus kasutajad kasutavad samaaegselt mitut sõrme või pliiatsit. The pointerId atribuut võimaldab teil jälgida iga kursori pinda, määrates igale neist kordumatu ID. Esmane ID määratakse esimesele kursori sisendile.

See omadus on eriti kasulik puutetundlike seadmete jaoks. Hiirekursoritele tuginevatel seadmetel võib olla korraga ainult üks kursori sisend, ilma et nendega oleks ühendatud mõni väline seade.

Siin on lihtne näide, mis prindib konsooli iga kursori sisendi ID:

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 atribuut

Atribuut pointerType aitab teil eristada eri tüüpi kursori sisendeid ja teha nende põhjal toiminguid. Saate eristada hiirt, pliiatsit ja sõrmepuudutust. See atribuut saab kasutada ainult ühte kolmest stringi sisendist: "hiir", "pliiats" või "puudutus". Siin on lihtne näide, kuidas kasutada pointerType vara:

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

Laiuse ja kõrguse omadused

Need omadused tähistavad kursori kontaktala laiust ja kõrgust millimeetrites. Mõned brauserid ei toeta neid ja nende väärtus on sellistes brauserites alati 1.

Nende omaduste hea kasutusjuht on rakendustes, mis nõuavad täpset sisendit või peavad eristama erinevate sisendite suurusi. Näiteks joonistusrakenduses võib suurem kõrgus ja laius tähendada, et kasutaja joonistab laiema joonega ja vastupidi.

Enamasti kasutate puutesündmuste jaoks tõenäoliselt laiuse ja kõrguse atribuute.

Suurema kaasatuse saavutamiseks kasutage osutisündmusi

Osutisündmused võimaldavad teil teenindada mitmesuguseid seadmeid ja sisenditüüpe ilma, et peaksite palju stressi läbima. Peaksite neid alati oma rakendustes kasutama, et vastata kaasaegsetele standarditele ja aidata luua paremat veebi.