Hoe Pointer-gebeurtenissen in JavaScript te gebruiken

Belangrijkste leerpunten

• Webapplicaties moeten een reeks invoerapparaten ondersteunen, en niet alleen een muis, om een ​​breder publiek te kunnen bedienen.
• Aanwijzergebeurtenissen in JavaScript verwerken zowel muis- als aanraakgebeurtenissen, waardoor het niet meer nodig is deze afzonderlijk te implementeren.
• Aanwijzergebeurtenissen hebben vergelijkbare namen en functionaliteit als muisgebeurtenissen, waardoor het eenvoudig is om bestaande code bij te werken ter ondersteuning van aanraak- en peninvoer.

Veel webapplicaties gaan ervan uit dat het aanwijsapparaat van een gebruiker een muis is, dus gebruiken ze muisgebeurtenissen om interacties af te handelen. Met de opkomst van touchscreen-apparaten hebben gebruikers echter geen muis meer nodig om met websites te communiceren. Het is essentieel om een ​​reeks invoerapparaten te ondersteunen om een ​​zo breed mogelijk publiek te kunnen bedienen.

JavaScript heeft een nieuwere standaard genaamd pointer-events. Het verwerkt zowel muis- als aanraakgebeurtenissen, zodat u zich geen zorgen hoeft te maken over het afzonderlijk implementeren ervan.

Wat zijn pointergebeurtenissen?

Aanwijzergebeurtenissen zijn een webstandaard die een uniforme manier definieert voor het omgaan met verschillende invoermethoden in een webbrowser, waaronder muis, aanraking en pen. Deze gebeurtenissen bieden een consistente en platformonafhankelijke manier van interactie met webinhoud op verschillende apparaten.

Kortom, pointer-gebeurtenissen helpen u bij het afhandelen van deze groep gebruikersinteracties, ongeacht de bron.

Soorten pointergebeurtenissen

Aanwijzergebeurtenissen hebben dezelfde naam als de muisgebeurtenissen waarmee u wellicht al bekend bent. Voor iedere muisGebeurtenis in JavaScript is er een overeenkomstige pointerEvent. Dit betekent dat u uw oude code opnieuw kunt bekijken en “muis” kunt vervangen door “aanwijzer” om aanraak- en peninvoer te ondersteunen.

De volgende tabel toont de verschillende aanwijzergebeurtenissen in vergelijking met muisgebeurtenissen:

U kunt zien dat er drie extra aanwijzergebeurtenissen zijn zonder overeenkomstige muisgebeurtenissen. Je zult later meer over deze gebeurtenissen te weten komen.

Aanwijzergebeurtenissen gebruiken in JavaScript

U kunt aanwijzergebeurtenissen op dezelfde manier gebruiken als muisgebeurtenissen. Zoals bij de meeste gebeurtenisafhandeling volgt het proces meestal dit patroon:

1. Gebruik een DOM-selector om een ​​element op te halen.
2. De... gebruiken addEventListener methode, specificeer de gebeurtenis waarin u geïnteresseerd bent en een callback-functie.
3. Gebruik eigenschappen en methoden van het argument van de callback, an Evenement voorwerp.

Hier is een voorbeeld waarbij de pointermove-gebeurtenis wordt gebruikt:

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

Dit codeblok definieert een doelelement en een JavaScript-functie om te gaan met de aanwijzerbeweging gebeurtenis, dan gebruikt het a JavaScript-gebeurtenislistener om de pointergebeurtenis en de functie aan het doelelement te koppelen.

Met behulp van deze code zal een element met een “doel”-ID de aanwijzercoördinaten weergeven wanneer u uw cursor, vinger of pen erover beweegt:

U kunt de andere pointergebeurtenissen op dezelfde manier gebruiken.

De pointercancel-gebeurtenis

De pointercancel-gebeurtenis wordt geactiveerd wanneer een andere pointer-gebeurtenis wordt onderbroken voordat deze zijn werking voltooit zoals oorspronkelijk bedoeld. Normaal gesproken annuleert de browser elke pointer-gebeurtenis die eerder in actie is geweest. Er zijn veel redenen waarom a aanwijzerannuleren gebeurtenis kan bijvoorbeeld leiden tot:

• Wanneer een gebruiker een telefoontje of een andere onderbrekende melding ontvangt terwijl hij een element over het scherm sleept.
• Wanneer de richting van het apparaat verandert.
• Wanneer het browservenster de focus verliest.
• Wanneer de gebruiker overschakelt naar een ander tabblad of applicatie.

Met de aanwijzerannuleren gebeurtenis kunt u met deze situaties omgaan zoals u dat wilt. Hier is een voorbeeld:

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

Aanwijzer vastleggen

Aanwijzer vastleggen is een functie waarmee een specifiek HTML-element alle pointergebeurtenissen voor een bepaalde pointer vastleggen en erop reageren, zelfs als die gebeurtenissen buiten de grens van het element plaatsvinden.

U kunt een pointer capture voor een element instellen met de setpointercapture() methode en geef een pointer capture vrij met de releasepointercapture() methode.

De kreeg aanwijzeropname En verloren aanwijzer vastleggen pointer-gebeurtenissen zijn handig voor het vastleggen van pointers.

Het gotpointercapture-evenement

De kreeg aanwijzeropname gebeurtenis wordt geactiveerd wanneer een element pointer capture krijgt. U kunt deze gebeurtenis gebruiken om een ​​status voor uw HTML-element te initialiseren om pointer-gebeurtenissen af ​​te handelen. In een tekentoepassing kunt u bijvoorbeeld gebruiken kreeg aanwijzeropname gebeurtenis om de beginpositie van de cursor in te stellen.

Het lostpointercapture-evenement

De verloren aanwijzer vastleggen gebeurtenis wordt geactiveerd wanneer een element de aanwijzeropname verliest. Je kunt het gebruiken om elke status op te ruimen of te verwijderen die is ontstaan ​​toen het element pointer capture kreeg. In een tekentoepassing wilt u misschien gebruiken verloren aanwijzer vastleggen om de cursor te verbergen.

Eigenschappen van aanwijzergebeurtenissen

Pointer-gebeurtenissen hebben eigenschappen waarmee u uw website interactiever en responsiever kunt maken. De eigenschappen van muisgebeurtenissen zijn dezelfde eigenschappen die u aantreft bij aanwijzergebeurtenissen, plus enkele extra eigenschappen. In dit artikel worden enkele van de aanvullende eigenschappen uitgelegd.

De pointerId-eigenschap

De pointerId is een aanwijzergebeurteniseigenschap waarmee u elke unieke aanwijzerinvoer, zoals stylus, vinger of muis, kunt identificeren. Elke pointerinvoer krijgt een unieke ID (automatisch gegenereerd door de browser) waarmee u deze kunt volgen en er bewerkingen op kunt uitvoeren.

Een geweldig gebruik voor de pointerId property is een gaming-applicatie waarbij gebruikers tegelijkertijd meerdere vingers of stylussen gebruiken. De pointerId Met deze eigenschap kunt u elk aanwijzeroppervlak bijhouden door aan elk aanwijzeroppervlak een unieke ID toe te wijzen. De primaire ID wordt toegewezen aan de eerste pointer-invoer.

Deze eigenschap is vooral handig voor aanraakapparaten. Apparaten die afhankelijk zijn van muisaanwijzers kunnen slechts één aanwijzerinvoer tegelijk hebben zonder dat er een extern apparaat op is aangesloten.

Hier is een eenvoudig voorbeeld waarbij de ID van elke pointerinvoer naar de console wordt afgedrukt:

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

De pointerType-eigenschap

Met de eigenschap pointerType kunt u onderscheid maken tussen de verschillende soorten pointerinvoer en kunt u op basis daarvan bewerkingen uitvoeren. U kunt onderscheid maken tussen een muis, een pen en een vingeraanraking. Deze eigenschap kan slechts één van de drie tekenreeksinvoer accepteren: 'muis', 'pen' of 'aanraking'. Hier is een eenvoudig voorbeeld van hoe u de pointerType eigendom:

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

De breedte- en hoogte-eigenschappen

Deze eigenschappen vertegenwoordigen de breedte en hoogte van het contactgebied van de aanwijzer in millimeters. Sommige browsers ondersteunen deze niet en hun waarde zal in dergelijke browsers altijd 1 zijn.

Een goede use case voor deze eigenschappen is in toepassingen die nauwkeurige invoer vereisen, of onderscheid moeten maken tussen de grootte van verschillende invoer. In een tekentoepassing kan een grotere hoogte en breedte bijvoorbeeld betekenen dat de gebruiker met een bredere streek tekent, en omgekeerd.

Meestal zult u waarschijnlijk de eigenschappen breedte en hoogte gebruiken voor aanraakgebeurtenissen.

Gebruik Pointer Events voor meer inclusiviteit

Met pointergebeurtenissen kunt u een breed scala aan apparaten en invoertypen bedienen zonder veel stress te ervaren. U moet ze altijd in uw toepassingen gebruiken om te voldoen aan de moderne normen en om een ​​beter internet te helpen bouwen.