Varför tillgodose endast musinmatning eller pekskärmar? Hantera båda typerna med samma ansträngning med hjälp av pekarhändelser.

Viktiga takeaways

  • Webbapplikationer bör stödja en rad olika inmatningsenheter, inte bara en mus, för att tillgodose en bredare publik.
  • Pekarhändelser i JavaScript hanterar både mus- och beröringshändelser, vilket eliminerar behovet av att implementera dem separat.
  • Pekarhändelser har liknande namn och funktionalitet som mushändelser, vilket gör det enkelt att uppdatera befintlig kod för att stödja berörings- och penningångar.

Många webbapplikationer förutsätter att en användares pekdon är en mus, så de använder mushändelser för att hantera interaktioner. Men med framväxten av pekskärmsenheter behöver användare inte en mus för att interagera med webbplatser. Det är viktigt att stödja en rad olika inmatningsenheter för att tillgodose största möjliga publik.

JavaScript har en nyare standard som kallas pekarhändelser. Den hanterar både mus- och beröringshändelser, så du behöver inte oroa dig för att implementera dem separat.

instagram viewer

Vad är Pointer Events?

Pekarhändelser är en webbstandard som definierar ett enhetligt sätt att hantera olika inmatningsmetoder i en webbläsare, inklusive mus, beröring och penna. Dessa händelser ger ett konsekvent och plattformsoberoende sätt att interagera med webbinnehåll på olika enheter.

I ett nötskal, pekarhändelser hjälper dig att hantera denna grupp av användarinteraktioner, oavsett källa.

Typer av Pointer-händelser

Pekarhändelser heter liknande de mushändelser du kanske redan känner till. För varje musEvent i JavaScript finns det en motsvarande pointerEvent. Det betyder att du kan gå tillbaka till din gamla kod och byta "mus" mot "pekare" för att börja stödja berörings- och penninmatningar.

Följande tabell visar de olika pekarhändelserna i jämförelse med mushändelser:

Pekarhändelser

Mouse Events

pekare ner

mus ner

pointerup

musupp

pointermove

musen

pointerleave

musblad

pekare

för muspekaren

pointerenter

mouesenter

påpekande

musen ut

pointercancel

ingen

gotpointercapture

ingen

lostpointercapture

ingen

Du kan se att det finns tre extra pekarhändelser utan motsvarande mushändelser. Du kommer att lära dig om dessa händelser senare.

Använda Pointer Events i JavaScript

Du kan använda pekarhändelser på samma sätt som du använder mushändelser. Som de flesta händelsehantering följer processen vanligtvis detta mönster:

  1. Använd en DOM-väljare för att hämta ett element.
  2. Använda addEventListener metod, ange händelsen du är intresserad av och en återuppringningsfunktion.
  3. Använd egenskaper och metoder för återuppringningsargumentet, en Händelse objekt.

Här är ett exempel med 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
functionhandlePointerMove(ev) {
// Handle the event however you want to
target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

Detta kodblock definierar ett målelement och en JavaScript-funktion att hantera pointermove händelse då den använder en JavaScript-händelselyssnare för att koppla pekarhändelsen och funktionen till målelementet.

Med den här koden kommer ett element med ett "mål"-ID att visa pekarkoordinaterna när du flyttar markören, fingret eller pennan över det:

Du kan använda de andra pekarhändelserna på samma sätt.

Pekaren avbryter händelse

Pointercancel-händelsen utlöses när en annan pekarhändelse avbryts innan den slutför sin operation som ursprungligen var tänkt. Normalt avbryter webbläsaren alla pekarhändelser som kan ha varit igång tidigare. Det finns många anledningar till att en pointercancel händelse kan utlösa, till exempel:

  • När en användare får ett telefonsamtal eller något annat avbrytande meddelande medan han drar ett element över skärmen.
  • När enhetens orientering ändras.
  • När webbläsarfönstret tappar fokus.
  • När användaren byter till en annan flik eller applikation.

Med pointercancel händelse kan du hantera dessa situationer hur du vill. Här är ett exempel:

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

Pekarfångning

Pekarfångning är en funktion som låter en specifik HTML-element fånga och svara på alla pekarhändelser för en viss pekare, även om dessa händelser inträffar utanför elementets gräns.

Du kan ställa in en pekarfångning för ett element med setpointercapture() metoden och släpp en pekarfångning med releasepointercapture() metod.

De gotpointercapture och lostpointercapture pekarhändelser är användbara för pekarfångning.

The gotpointercapture-händelse

De gotpointercapture händelsen utlöses när ett element får pekare. Du kan använda denna händelse för att initiera ett tillstånd för ditt HTML-element för att hantera pekhändelser. Till exempel, i en ritapplikation kan du använda gotpointercapture händelse för att ställa in startpositionen för markören.

Lostpointercapture-händelsen

De lostpointercapture händelsen utlöses när ett element förlorar pekarfångst. Du kan använda den för att rensa upp eller ta bort alla tillstånd som skapades när elementet fick pekare. I ett ritprogram kanske du vill använda lostpointercapture för att dölja markören.

Egenskaper för Pointer Events

Pointer-händelser har egenskaper som hjälper dig att göra din webbplats mer interaktiv och responsiv. Egenskaperna för mushändelser är samma egenskaper som du hittar i pekhändelser, plus några ytterligare egenskaper. Den här artikeln förklarar några av de ytterligare egenskaperna.

PointerId-egenskapen

De pointerId är en pekarhändelseegenskap som hjälper dig att identifiera varje unik pekarinmatning, som pekpenna, finger eller mus. Varje pekare får ett unikt ID (autogenererat av webbläsaren) som gör att du kan spåra och utföra operationer på dem.

En stor användning för pointerId property är en spelapplikation där användare använder flera fingrar eller pennor samtidigt. De pointerId egenskapen låter dig hålla reda på varje pekyta genom att tilldela ett unikt ID till var och en av dem. Det primära ID: t tilldelas den första pekaringången.

Den här egenskapen är särskilt användbar för pekenheter. Enheter som förlitar sig på muspekare kan bara ha en pekare i taget utan att någon extern enhet är ansluten till dem.

Här är ett enkelt exempel som skriver ut ID: t för varje pekarinmatning till konsolen:

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

PointerType-egenskapen hjälper dig att skilja mellan de olika typerna av pekareinmatningar och låter dig utföra operationer baserat på dem. Du kan skilja på en mus, en penna och en fingerberöring. Den här egenskapen kan bara ta en av tre strängingångar: "mus", "penna" eller "touch". Här är ett enkelt exempel på hur man använder pointerType fast egendom:

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

Bredden och höjden Egenskaper

Dessa egenskaper representerar bredden och höjden på pekarens kontaktyta i millimeter. Vissa webbläsare stöder inte dem, och deras värde kommer alltid att vara 1 i sådana webbläsare.

Ett bra användningsfall för dessa egenskaper kommer att vara i applikationer som kräver exakt inmatning eller behöver skilja mellan storlekarna på olika inmatningar. Till exempel, i en ritapplikation, kan en större höjd och bredd betyda att användaren ritar med ett bredare slaglängd och vice versa.

De flesta gånger kommer du sannolikt att använda egenskaperna för bredd och höjd för beröringshändelser.

Använd Pointer Events för mer inklusivitet

Pekarhändelser gör att du kan tillgodose ett brett utbud av enheter och ingångstyper utan att gå igenom mycket stress. Du bör alltid använda dem i dina applikationer för att följa moderna standarder och hjälpa till att bygga en bättre webb.