A mutató események használata JavaScriptben

Kulcs elvitelek

• A webes alkalmazásoknak számos beviteli eszközt kell támogatniuk, nem csak egy egeret, hogy szélesebb közönséget szolgáljanak ki.
• A JavaScript mutatóeseményei mind az egér, mind az érintés eseményeit kezelik, így nincs szükség külön megvalósításukra.
• A mutató események neve és funkciója hasonló, mint az egéresemények, így könnyen frissíthető a meglévő kód, hogy támogassa az érintéssel és tollal történő bevitelt.

Sok webalkalmazás feltételezi, hogy a felhasználó mutatóeszköze egér lesz, ezért egéreseményeket használnak az interakciók kezelésére. Az érintőképernyős eszközök térnyerésével azonban a felhasználóknak nincs szükségük egérre a webhelyekkel való interakcióhoz. A lehető legszélesebb közönség kiszolgálása érdekében elengedhetetlen egy sor beviteli eszköz támogatása.

A JavaScript-nek van egy újabb szabványa, az úgynevezett pointer events. Mind az egér, mind az érintés eseményeit kezeli, így nem kell külön-külön implementálni őket.

Mik azok a mutató események?

A mutatóesemények egy webes szabvány, amely egységes módszert határoz meg a különböző beviteli módok webböngészőben történő kezelésében, beleértve az egeret, az érintést és a tollat. Ezek az események konzisztens és platformfüggetlen módot biztosítanak a webtartalommal való interakcióhoz a különböző eszközökön.

Dióhéjban a mutatóesemények segítenek kezelni a felhasználói interakciók ezen csoportját, a forrástól függetlenül.

A mutató események típusai

A mutató események elnevezése hasonló az egéreseményekhez, amelyeket esetleg már ismer. Minden mouseEvent a JavaScriptben van egy megfelelő pointerEvent. Ez azt jelenti, hogy újra megtekintheti a régi kódot, és átválthatja az „egeret” „mutatóra”, hogy támogassa az érintéssel és a tollal történő bevitelt.

Az alábbi táblázat a különböző mutató eseményeket mutatja az egéreseményekhez képest:

Látható, hogy három extra mutatóesemény van a megfelelő egéresemények nélkül. Ezekről az eseményekről később tájékozódhat.

Mutatóesemények használata JavaScriptben

A mutató eseményeket ugyanúgy használhatja, mint az egéreseményeket. A legtöbb eseménykezeléshez hasonlóan a folyamat általában a következő mintát követi:

1. Használjon DOM-választót elemet hozni.
2. Használni a addEventListener módszert, adja meg az érdeklődő eseményt és egy visszahívási funkciót.
3. Használja a visszahívási argumentum tulajdonságait és metódusait, an Esemény tárgy.

Íme egy példa a pointermove esemény használatára:

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

Ez a kódblokk meghatároz egy célelemet és JavaScript függvény kezelni a pointermove eseményt akkor használja a JavaScript eseményfigyelő hogy a mutató eseményt és a függvényt a célelemhez csatolja.

Ezzel a kóddal egy „cél” azonosítóval rendelkező elem megjeleníti a mutató koordinátáit, amikor a kurzort, az ujját vagy a tollat ​​fölé viszi:

Ugyanígy használhatja a többi mutató eseményt is.

A mutató törlése esemény

A pointercancel esemény akkor aktiválódik, amikor egy másik mutatóesemény megszakad, mielőtt az eredetileg tervezett működését befejezné. Normális esetben a böngésző töröl minden mutató eseményt, amely korábban működésben volt. Számos oka van annak, hogy a pointercancel esemény kiválthat például:

• Amikor egy felhasználó telefonhívást vagy más megszakító értesítést kap, miközben egy elemet áthúz a képernyőn.
• Amikor az eszköz tájolása megváltozik.
• Amikor a böngészőablak elveszti a fókuszt.
• Amikor a felhasználó másik lapra vagy alkalmazásra vált.

A... val pointercancel esemény esetén kezelheti ezeket a helyzeteket, ahogy akarja. Íme egy példa:

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

Mutató rögzítése

A mutatórögzítés egy olyan funkció, amely lehetővé teszi egy adott HTML elem egy adott mutató összes mutatóeseményének rögzítése és reagálása, még akkor is, ha ezek az események az elem határain kívül történnek.

Beállíthat egy mutatórögzítést egy elemhez a setpointercapture() módszert, és engedje el a mutatórögzítést a releasepointercapture() módszer.

A mutatófelvételt kapott és elveszett pointercapture mutató események hasznosak a mutató rögzítéséhez.

A gotpointercapture esemény

A mutatófelvételt kapott esemény aktiválódik, amikor egy elem mutatórögzítést kap. Ezzel az eseménnyel inicializálhatja a HTML-elem állapotát a mutatóesemények kezeléséhez. Például egy rajzalkalmazásban használhatja mutatófelvételt kapott eseményt a kurzor kezdeti pozíciójának beállításához.

A Lostpointercapture esemény

A elveszett pointercapture esemény akkor aktiválódik, amikor egy elem elveszíti a mutató rögzítését. Használhatja minden olyan állapot megtisztítására vagy eltávolítására, amely akkor keletkezett, amikor az elem mutatórögzítést kapott. Egy rajzalkalmazásban érdemes használni elveszett pointercapture hogy elrejtse a kurzort.

A mutató események tulajdonságai

A mutatóesemények olyan tulajdonságokkal rendelkeznek, amelyek segítségével interaktívabbá és reszponzívabbá teheti webhelyét. Az egéresemények tulajdonságai ugyanazok, mint a mutatóeseményeknél, plusz néhány további tulajdonság. Ez a cikk néhány további tulajdonságot ismertet.

A pointerId tulajdonság

A pointerId egy pointer esemény tulajdonság, amely segít azonosítani az egyes egyedi mutatóbeviteleket, például a ceruzát, ujjat vagy egeret. Minden mutató bemenet egyedi azonosítót kap (amelyet a böngésző automatikusan generál), amely lehetővé teszi a nyomon követést és a műveletek végrehajtását.

Remek felhasználás a pointerId A property egy játékalkalmazás, ahol a felhasználók egyszerre több ujjat vagy ceruzát használnak. A pointerId tulajdonság lehetővé teszi az egyes mutatófelületek nyomon követését úgy, hogy mindegyikhez egyedi azonosítót rendel. Az elsődleges azonosító az első mutatóbemenethez lesz hozzárendelve.

Ez a tulajdonság különösen hasznos az érintőképernyős eszközöknél. Azok az eszközök, amelyek egérmutatókra támaszkodnak, egyszerre csak egy mutatóbemenettel rendelkezhetnek külső eszköz csatlakoztatása nélkül.

Íme egy egyszerű példa, amely kinyomtatja az egyes mutatóbemenetek azonosítóját a konzolon:

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

A pointerType tulajdonság

A pointerType tulajdonság segít megkülönböztetni a különböző típusú mutatóbemeneteket, és lehetővé teszi az ezek alapján műveletek végrehajtását. Megkülönböztetheti az egeret, a tollat ​​és az ujjérintést. Ez a tulajdonság a három karakterlánc bemenet egyikét veheti igénybe: „egér”, „toll” vagy „érintés”. Íme egy egyszerű példa arra, hogyan kell használni a pointerType ingatlan:

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

A szélesség és magasság tulajdonságai

Ezek a tulajdonságok a mutató érintkezési területének szélességét és magasságát jelentik milliméterben. Egyes böngészők nem támogatják őket, és értékük mindig 1 lesz az ilyen böngészőkben.

Ezeknek a tulajdonságoknak jó felhasználási esete azokban az alkalmazásokban van, amelyek pontos bevitelt igényelnek, vagy meg kell különböztetni a különböző bemenetek méretét. Például egy rajzalkalmazásban a nagyobb magasság és szélesség azt jelentheti, hogy a felhasználó szélesebb körvonallal rajzol, és fordítva.

A legtöbb esetben valószínűleg a szélesség és magasság tulajdonságokat fogja használni az érintési eseményekhez.

Használja a mutató eseményeket a nagyobb befogadás érdekében

A mutatóesemények lehetővé teszik, hogy eszközök és beviteli típusok széles skáláját szolgálja ki anélkül, hogy sok stresszen menne keresztül. Mindig használja őket alkalmazásaiban, hogy megfeleljen a modern szabványoknak, és segítsen egy jobb web felépítésében.