Osoitintapahtumien käyttäminen JavaScriptissä

Key Takeaways

• Verkkosovellusten tulisi tukea useita syöttölaitteita, ei vain hiirtä, palvellakseen laajempaa yleisöä.
• Osoitintapahtumat JavaScriptissä käsittelevät sekä hiiri- että kosketustapahtumia, joten niitä ei tarvitse toteuttaa erikseen.
• Osoitintapahtumilla on samanlaiset nimet ja toiminnot kuin hiiritapahtumilla, joten olemassa olevan koodin päivittäminen on helppoa kosketus- ja kynäsyöttöä tukevaksi.

Monet verkkosovellukset olettavat, että käyttäjän osoitinlaite on hiiri, joten ne käyttävät hiiritapahtumia vuorovaikutusten käsittelyyn. Kosketusnäyttölaitteiden yleistyessä käyttäjät eivät kuitenkaan tarvitse hiirtä ollakseen vuorovaikutuksessa verkkosivustojen kanssa. On tärkeää tukea erilaisia ​​syöttölaitteita, jotta ne palvelevat mahdollisimman laajaa yleisöä.

JavaScriptillä on uudempi standardi nimeltä osoitintapahtumat. Se käsittelee sekä hiiri- että kosketustapahtumia, joten sinun ei tarvitse huolehtia niiden toteuttamisesta erikseen.

Mitä ovat osoitintapahtumat?

Osoitintapahtumat ovat verkkostandardi, joka määrittelee yhtenäisen tavan käsitellä erilaisia ​​syöttötapoja verkkoselaimessa, mukaan lukien hiiri, kosketus ja kynä. Nämä tapahtumat tarjoavat yhtenäisen ja alustasta riippumattoman tavan olla vuorovaikutuksessa verkkosisällön kanssa eri laitteilla.

Lyhyesti sanottuna osoitintapahtumat auttavat sinua käsittelemään tätä käyttäjävuorovaikutusryhmää lähteestä riippumatta.

Osoitintapahtumien tyypit

Osoitintapahtumat on nimetty samalla tavalla kuin hiiren tapahtumat, jotka saatat jo tuntea. Jokaiselle mouseEvent JavaScriptissä on vastaava pointerEvent. Tämä tarkoittaa, että voit palata vanhaan koodiisi ja vaihtaa "hiiren" "osoittimeksi" aloittaaksesi kosketus- ja kynäsyöttöjen tukemisen.

Seuraava taulukko näyttää erilaiset osoitintapahtumat verrattuna hiiren tapahtumiin:

Voit nähdä, että on kolme ylimääräistä osoitintapahtumaa ilman vastaavia hiiritapahtumia. Näistä tapahtumista saat tietoa myöhemmin.

Osoitintapahtumien käyttö JavaScriptissä

Voit käyttää osoitintapahtumia samalla tavalla kuin hiiren tapahtumia. Kuten useimmat tapahtumankäsittelyt, prosessi noudattaa yleensä tätä kaavaa:

1. Käytä DOM-valitsinta noutaaksesi elementin.
2. Käyttämällä addEventListener menetelmää, määritä tapahtuma, josta olet kiinnostunut, ja takaisinsoittotoiminto.
3. Käytä takaisinkutsun argumentin ominaisuuksia ja menetelmiä, an Tapahtuma esine.

Tässä on esimerkki pointermove-tapahtumasta:

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

Tämä koodilohko määrittää kohdeelementin ja JavaScript-funktio käsittelemään pointermove tapahtumaa, se käyttää a JavaScript-tapahtuman kuuntelija liittääksesi osoitintapahtuman ja funktion kohdeelementtiin.

Tätä koodia käyttämällä elementti, jolla on "kohdetunnus", näyttää osoittimen koordinaatit, kun siirrät kohdistinta, sormea ​​tai kynää sen päällä:

Voit käyttää muita osoitintapahtumia samalla tavalla.

Osoitinperuuta tapahtuma

Osoittimen peruutustapahtuma laukeaa, kun toinen osoitintapahtuma keskeytyy ennen kuin se saa toiminnan loppuun alun perin tarkoitetulla tavalla. Normaalisti selain peruuttaa minkä tahansa osoitintapahtuman, joka on voinut olla toiminnassa aiemmin. On monia syitä, miksi a osoitin peruuta tapahtuma voi laukaista esim.

• Kun käyttäjä saa puhelun tai jonkin muun keskeyttävän ilmoituksen vetäessään elementtiä näytön poikki.
• Kun laitteen suunta muuttuu.
• Kun selainikkuna menettää tarkennuksen.
• Kun käyttäjä vaihtaa toiseen välilehteen tai sovellukseen.

Kanssa osoitin peruuta tapahtumassa, voit käsitellä näitä tilanteita miten haluat. Tässä on esimerkki:

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

Osoittimen sieppaus

Osoittimen sieppaus on ominaisuus, joka mahdollistaa tietyn HTML-elementti kaappaa kaikki tietyn osoittimen osoitintapahtumat ja vastaa niihin, vaikka tapahtumat tapahtuisivat elementin rajojen ulkopuolella.

Voit asettaa osoittimen sieppauksen elementille -painikkeella setpointercapture() -menetelmää ja vapauta osoittimen sieppaus -painikkeella releasepointercapture() menetelmä.

The sain osoitinkaappauksen ja kadonnut osoittimen sieppaus osoitintapahtumat ovat hyödyllisiä osoittimen sieppaamiseen.

Gotpointercapture -tapahtuma

The sain osoitinkaappauksen tapahtuma käynnistyy aina, kun elementti saa osoittimen sieppauksen. Voit käyttää tätä tapahtumaa HTML-elementin tilan alustamiseen osoitintapahtumien käsittelyä varten. Esimerkiksi piirustussovelluksessa voit käyttää sain osoitinkaappauksen tapahtuma asettaaksesi kohdistimen alkupaikan.

Lostpointercapture -tapahtuma

The kadonnut osoittimen sieppaus tapahtuma käynnistyy, kun elementti menettää osoittimen sieppauksen. Voit käyttää sitä puhdistaaksesi tai poistaaksesi minkä tahansa tilan, joka on luotu, kun elementti sai osoittimen sieppauksen. Piirustussovelluksessa saatat haluta käyttää kadonnut osoittimen sieppaus piilottaaksesi kohdistimen.

Osoitintapahtumien ominaisuudet

Osoitintapahtumilla on ominaisuuksia, jotka auttavat sinua tekemään verkkosivustostasi interaktiivisemman ja reagoivamman. Hiiren tapahtumien ominaisuudet ovat samat kuin osoitintapahtumissa, sekä joitain lisäominaisuuksia. Tässä artikkelissa selitetään joitakin lisäominaisuuksia.

PointerId-ominaisuus

The pointerId on osoitintapahtumaominaisuus, jonka avulla voit tunnistaa jokaisen yksilöllisen osoitinsyötteen, kuten kynän, sormen tai hiiren. Jokainen osoittimen syöte saa yksilöllisen tunnuksen (selaimen automaattisesti luoma), jonka avulla voit seurata niitä ja suorittaa niille toimintoja.

Loistava käyttökohde pointerId property on pelisovellus, jossa käyttäjät käyttävät samanaikaisesti useita sormia tai kynsiä. The pointerId ominaisuuden avulla voit seurata jokaista osoitinpintaa määrittämällä jokaiselle niille yksilöllisen tunnuksen. Ensisijainen tunnus määritetään ensimmäiselle osoitintulolle.

Tämä ominaisuus on erityisen hyödyllinen kosketuslaitteissa. Hiiriosoittimiin luotettavilla laitteilla voi olla vain yksi osoitintulo kerrallaan ilman, että niihin on kytketty ulkoisia laitteita.

Tässä on yksinkertainen esimerkki, joka tulostaa jokaisen konsoliin syötetyn osoittimen tunnuksen:

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-ominaisuus

PointerType-ominaisuus auttaa sinua erottamaan erityyppiset osoitintulot ja voit suorittaa toimintoja niiden perusteella. Voit erottaa hiiren, kynän ja sormikosketuksen. Tämä ominaisuus voi ottaa vain yhden kolmesta merkkijonosyötteestä: "hiiri", "kynä" tai "kosketus". Tässä on yksinkertainen esimerkki, kuinka käyttää pointerType omaisuus:

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

Leveyden ja korkeuden ominaisuudet

Nämä ominaisuudet edustavat osoittimen kosketusalueen leveyttä ja korkeutta millimetreinä. Jotkut selaimet eivät tue niitä, ja niiden arvo on aina 1 sellaisissa selaimissa.

Hyvä käyttötapa näille ominaisuuksille on sovelluksissa, jotka vaativat tarkkaa syöttöä tai joiden on erotettava eri tulojen koot. Esimerkiksi piirustussovelluksessa suurempi korkeus ja leveys voi tarkoittaa, että käyttäjä piirtää leveämmällä vedolla ja päinvastoin.

Useimmiten käytät leveys- ja korkeusominaisuuksia kosketustapahtumissa.

Käytä osoitintapahtumia saadaksesi lisää osallisuutta

Osoitintapahtumien avulla voit palvella monenlaisia ​​laitteita ja syöttötyyppejä ilman, että joudut kokemaan paljon stressiä. Sinun tulee aina käyttää niitä sovelluksissasi noudattaaksesi nykyaikaisia ​​standardeja ja auttaaksesi rakentamaan parempaa verkkoa.