Hur man använder pekarhändelser i JavaScript
Viktiga lärdomar
För att säkerställa inkludering och tillgänglighet för en bredare användarbas bör webbapplikationer utformas med olika inmatningsalternativ utöver traditionella möss. Detta tillvägagångssätt möjliggör större anpassningsförmåga till individuella behov och preferenser samtidigt som det främjar universell användbarhet.
Användningen av pekarhändelser i JavaScript möjliggör effektiv hantering av både musbaserade och pekbaserade interaktioner, vilket gör att det inte krävs separata implementeringsprocesser för respektive händelsetyp.
Utformningen av pekarhändelser i modern webbutveckling speglar i hög grad utformningen av traditionella mushändelser, vilket gör det lättare att anpassa befintlig källkod för både pekskärm och pekpenna.
Utbredningen av pekskärmsteknik har lett till ett ökat beroende av fingerbaserade inmatningar för digitala interaktioner. Följaktligen är det avgörande för moderna webbutvecklingsmetoder att tillgodose och underlätta olika former av användarinteraktion genom olika inmatningsenheter utöver traditionella musdrivna gränssnitt.
Genom att använda den nyare standarden Pointer Events i JavaScript kan man sömlöst integrera både musbaserade och pekbaserade inmatningar och därmed eliminera behovet av separata implementeringsprocesser.
Vad är pekarhändelser?
Pekarhändelser utgör ett universellt användbart paradigm för hantering av olika inmatningsmodaliteter i en webbsurfningskontext, som omfattar traditionella markörbaserade gränssnitt tillsammans med moderna alternativ som pekskärm och stylusdrivna interaktioner. Detta sammanhängande tillvägagångssätt säkerställer sömlösa gränssnitt med internetbaserat innehåll oavsett vilken hårdvaruplattform som används.
I huvudsak underlättar pekarhändelser hanteringen av en samling användarinteraktioner, oavsett deras ursprung.
Typer av pekarhändelser
Pekarhändelser har samma namn som mushändelser, vilket du kanske redan känner till. Varje mushändelse i JavaScript motsvaras av en pekarhändelse, vilket gör det möjligt att konvertera från “mus” till “pekare” för att stödja pekdon och pennor.
Diagrammet visar en jämförelse sida vid sida mellan olika pekarhändelser och motsvarande mushändelser:
Pekarhändelser
|
Mushändelser
-|-
pointerdown
|
mousedown
pointerup
|
mouseup
pointermove
|
mousemove
pointerleave
|
mouseleave
pointerover
|
mouseover
pointerenter
|
mouesenter
pointerout
|
mouseout
pointercancel
|
none
gotpointercapture
|
none
lostpointercapture
|
none
Det är uppenbart att det finns en trio av kompletterande pekarhändelser som saknar korrelerande mushändelser. En förståelse för sådana händelser kommer att beskrivas i sinom tid.
Använda pekarhändelser i JavaScript
Du kan använda pekarhändelser på ett sätt som är analogt med mushändelser, och det typiska arbetsflödet för att bearbeta sådana händelser följer i allmänhet följande struktur:
Använd en DOM-frågemekanism för att hämta ett specifikt HTML-element från dokumentobjektmodellen genom att ange dess unika identifierare eller attribut i HTML-koden, vilket möjliggör effektiv manipulation och interaktion med det valda elementet i JavaScript eller andra programmeringsspråk.
Med hjälp av metoden addEventListener kan man ange en händelse av intresse och associera den med en funktion som ska utföras när den inträffar.
Använd attributen och funktionerna för det händelseobjekt som skickas som en parameter till callback-funktionen, som representerar en händelse som utlöser en reaktion eller ett svar i koden.
Här är ett exempel som använder händelsen pointermove:
// 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
function handlePointerMove(ev) {
// Handle the event however you want to
target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}
Den medföljande koden skapar ett angivet objekt i DOM, tillsammans med en skriptfunktion i JavaScript som svarar på händelsen “pointermove”.Genom att använda en JavaScript-funktion lägger koden till en event-lyssnare till det angivna målelementet som binder samman både den pekarbaserade åtgärden och den associerade funktionen.
Denna kod möjliggör visualisering av positionen för ett målelement på en webbsida med hjälp av en pekares rörelse över det via en markör, ett finger eller en penna. Elementet i fråga identifieras genom sin unika “target”-identifierare.
På liknande sätt kan du använda de olika pekarhändelserna för ditt avsedda ändamål.
Händelsen pointercancel
Händelsen PointerCancel aktiveras när en annan pekarhändelse stör och avslutar den pågående exekveringen innan den har slutförts på avsett sätt. Vanligtvis kommer webbläsaren att annullera alla tidigare pekarhändelser som kan ha ägt rum vid tidpunkten för avbrottet. En mängd olika faktorer kan leda till att denna händelse aktiveras, inklusive men inte begränsat till:
När användare aktivt hanterar en elektronisk enhet genom pekbaserade interaktioner, t.ex. genom att dra ett element över skärmen, kan det uppstå avbrott i deras arbetsflöde på grund av inkommande samtal eller meddelanden som kräver omedelbar uppmärksamhet.
⭐När enhetens orientering ändras.
⭐När webbläsarfönstret tappar fokus.
När en användare väljer att navigera bort från det aktuella gränssnittet eller interagera med ett annat program, vilket signalerar en avvikelse från deras nuvarande uppmärksamhetsfokus och indikerar en förändring i prioritet.
Händelsen pointercancel erbjuder en mångsidig lösning för att hantera olika scenarier på ett sätt som är anpassat till dina specifika krav. Ett exempel visas nedan:
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 Capturing tillåter ett HTML-element att fånga upp och reagera på alla pekarbaserade interaktioner som riktas mot det, oavsett om de sker inom eller utanför dess avgränsade gränser.
Metoden setPointerCapture() gör det möjligt att fånga pekare som är relaterade till ett specifikt element, medan metoden releasePointerCapture() släpper alla fångade pekare som är associerade med det specifika elementet.
Händelser där pekare fångas, både erhållna och förlorade, kan användas effektivt för att fånga pekare i olika scenarier.
Händelsen gotpointercapture
Händelsen gotpointercapture utlöses när ett element fångar in en pekare. Denna händelse kan användas för att skapa ett tillstånd för hantering av pekarhändelser på ett HTML-element.I ett ritprogram kan t.ex. händelsen gotpointercapture användas för att ange markörens startposition.
Händelsen lostpointercapture
Händelsen Lost Pointer Capture aktiveras när ett element ger upp sitt grepp om muspekaren. Denna händelse ger möjlighet att släppa eller eliminera tidigare etablerade tillstånd som initierades när elementet fick tag i pekaren. I ett grafiskt program, t.ex. ett ritprogram, kan händelsen “Lost Pointer Capture” användas för att dölja markörens närvaro och förbättra användarupplevelsen genom sömlös interaktivitet och visuell fördjupning.
Egenskaper för pekarhändelser
Pekarhändelser har vissa attribut som bidrar till ökad interaktivitet och responsivitet på webbplatser. Dessa attribut speglar de som finns i mushändelser samtidigt som de också innehåller ytterligare egenskaper. I den här artikeln beskrivs ett urval av dessa extra funktioner.
The pointerId Property
The pointerId är en särskiljande identifierare som tilldelas varje enskild pekarbaserad inmatning, inklusive de som görs med en penna, finger eller mus. Denna autogenererade identifierare, som tillhandahålls av webbläsaren, gör det möjligt att spåra flera inmatningar och underlättar utförandet av olika åtgärder som är associerade med varje respektive inmatning.
I ett multi-touch spelscenario fungerar egenskapen PointerId som ett effektivt sätt att skilja mellan enskilda finger- eller penninmatningar. Genom att tilldela en unik identifierare till varje pekares yta kan systemet noggrant särskilja och bearbeta olika beröringar från flera källor, med den första inmatningen som det primära ID:t.
Denna egenskap är mycket användbar när den används med pekbaserade enheter, eftersom sådana enheter kan hantera flera fingerinmatningar samtidigt utan att kräva någon ytterligare kringutrustning. Däremot är markörorienterade enheter, som främst förlitar sig på användningen av en muspekare, begränsade i sin förmåga att samtidigt ta emot mer än en pekaringång, vilket kräver att extra utrustning införlivas för att möjliggöra denna funktionalitet.
Här är en elegant formulerad version av kodavsnittet i fråga:csharpvoid printPointerIds(int* ptr1, int* ptr2) {std::cout " “ID för pekare 1: " " *ptr1 " std::endl;std::cout " “ID för pekare 2: " " *ptr2 " std::endl;}// Usage:int main() {int arr[5] = {0, 1, 2, 3, 4};auto ptr1 = arr; // Deklarera och initialisera pekaren ‘ptr1’ med adressen för det första elementet i matrisen ‘arr’.auto ptr2 = &arr[1]; // Deklarera och initialisera pekaren '
const target = document.getElementById('target');
target.addEventListener('pointerdown', (event) => {
console.log(`Pointer ID: ${event.pointerId}`);
// Handle the pointer down event for the specific pointerId
});
Egenskapen pointerType
“mus”, “penna” eller “touch”. En enkel illustration av hur du använder egenskapen pointerType finns nedan:
function handlePointerEvent(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);
Egenskaper för bredd och höjd
Måtten på pekarens kontaktområde uttrycks i millimeter med hjälp av dessa attribut. Tyvärr känner vissa webbläsare inte igen dessa egenskaper, vilket resulterar i ett konstant värde på 1 för just dessa webbläsare.
En lämplig tillämpning för de ovan nämnda attributen finns i program som kräver exakt inmatning eller som kräver urskiljning mellan inmatningar av varierande storlek. Som exempel kan nämnas ett ritprogram där större mått motsvarar en mer omfattande penseldrag, medan mindre mått motsvarar en smalare gest.
När man arbetar med touchhändelser i webbutveckling är det vanligt att använda egenskaperna bredd och höjd.
Använd pekarhändelser för mer inkludering
Att använda pekarhändelser kan förenkla processen med att anpassa olika enheter och inmatningsmodaliteter, vilket eliminerar behovet av överdriven ansträngning från din sida. Att följa gällande standarder genom att införliva dessa händelser i dina applikationer rekommenderas starkt eftersom det bidrar till att förbättra webbupplevelsen.