Comment utiliser les événements de pointeur en JavaScript

Points clés à retenir

• Les applications Web doivent prendre en charge une gamme de périphériques d'entrée, et pas seulement une souris, pour répondre à un public plus large.
• Les événements de pointeur en JavaScript gèrent à la fois les événements de souris et les événements tactiles, éliminant ainsi le besoin de les implémenter séparément.
• Les événements de pointeur ont des noms et des fonctionnalités similaires à ceux de la souris, ce qui facilite la mise à jour du code existant pour prendre en charge les saisies tactiles et au stylet.

De nombreuses applications Web supposent que le périphérique de pointage d'un utilisateur sera une souris et utilisent donc les événements de souris pour gérer les interactions. Cependant, avec l’essor des appareils à écran tactile, les utilisateurs n’ont plus besoin de souris pour interagir avec les sites Web. Il est essentiel de prendre en charge une gamme de périphériques d’entrée pour répondre au public le plus large possible.

JavaScript a une norme plus récente appelée événements de pointeur. Il gère à la fois les événements de souris et les événements tactiles, vous n'avez donc pas à vous soucier de les implémenter séparément.

Que sont les événements de pointeur?

Les événements de pointeur sont une norme Web qui définit une manière unifiée de gérer différentes méthodes de saisie dans un navigateur Web, notamment la souris, le toucher et le stylet. Ces événements offrent une manière cohérente et indépendante de la plate-forme d'interagir avec le contenu Web sur différents appareils.

En un mot, les événements de pointeur vous aident à gérer ce groupe d'interactions utilisateur, quelle que soit la source.

Types d'événements de pointeur

Les événements de pointeur sont nommés de la même manière que les événements de souris que vous connaissez peut-être déjà. Pour chaque Événement de souris en JavaScript, il y a un correspondant pointeurÉvénement. Cela signifie que vous pouvez revoir votre ancien code et remplacer « souris » par « pointeur » pour commencer à prendre en charge les saisies tactiles et au stylet.

Le tableau suivant présente les différents événements de pointeur par rapport aux événements de souris :

Vous pouvez voir qu'il existe trois événements de pointeur supplémentaires sans événements de souris correspondants. Vous en apprendrez plus sur ces événements plus tard.

Utilisation des événements de pointeur en JavaScript

Vous pouvez utiliser les événements de pointeur de la même manière que vous utilisez les événements de souris. Comme la plupart des gestions d’événements, le processus suit généralement ce modèle :

1. Utiliser un sélecteur DOM pour récupérer un élément.
2. En utilisant le addEventListener méthode, spécifiez l’événement qui vous intéresse et une fonction de rappel.
3. Utiliser les propriétés et les méthodes de l'argument du rappel, un Événement objet.

Voici un exemple utilisant l'événement 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}`;
}

Ce bloc de code définit un élément cible et une fonction JavaScript pour gérer le pointeurdéplacer événement, il utilise alors un Écouteur d'événements JavaScript pour attacher l'événement pointeur et la fonction à l'élément cible.

En utilisant ce code, un élément avec un identifiant « cible » affichera les coordonnées du pointeur lorsque vous déplacerez votre curseur, votre doigt ou votre stylo dessus :

Vous pouvez utiliser les autres événements de pointeur de la même manière.

L'événement pointercancel

L'événement pointercancel est déclenché lorsqu'un autre événement de pointeur est interrompu avant de terminer son opération comme prévu initialement. Normalement, le navigateur annule tout événement de pointeur qui aurait pu être en action auparavant. Il existe de nombreuses raisons pour lesquelles un pointeurannuler l'événement peut déclencher, par exemple :

• Lorsqu'un utilisateur reçoit un appel téléphonique ou une autre notification d'interruption tout en faisant glisser un élément sur l'écran.
• Lorsque l'orientation de l'appareil change.
• Lorsque la fenêtre du navigateur perd le focus.
• Lorsque l'utilisateur passe à un autre onglet ou une autre application.

Avec le pointeurannuler événement, vous pouvez gérer ces situations comme vous le souhaitez. Voici un exemple :

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

Capture de pointeur

La capture de pointeur est une fonctionnalité qui permet à un Élément HTML capturer et répondre à tous les événements de pointeur pour un pointeur particulier, même si ces événements se produisent en dehors des limites de l'élément.

Vous pouvez définir une capture de pointeur pour un élément avec le setpointercapture() méthode et relâchez une capture de pointeur avec le releasepointercapture() méthode.

Le gotpointercapture et capture de pointeur perdu les événements de pointeur sont utiles pour la capture de pointeur.

L'événement gotpointercapture

Le gotpointercapture L'événement est déclenché chaque fois qu'un élément obtient la capture du pointeur. Vous pouvez utiliser cet événement pour initialiser un état pour votre élément HTML afin de gérer les événements de pointeur. Par exemple, dans une application de dessin, vous pouvez utiliser gotpointercapture événement pour définir la position initiale du curseur.

L'événement LostPointerCapture

Le capture de pointeur perdu L'événement est déclenché lorsqu'un élément perd la capture du pointeur. Vous pouvez l'utiliser pour nettoyer ou supprimer tout état créé lorsque l'élément a obtenu la capture du pointeur. Dans une application de dessin, vous souhaiterez peut-être utiliser capture de pointeur perdu pour masquer le curseur.

Propriétés des événements de pointeur

Les événements de pointeur ont des propriétés qui vous aideront à rendre votre site Web plus interactif et réactif. Les propriétés des événements de souris sont les mêmes que celles que vous trouverez dans les événements de pointeur, plus quelques propriétés supplémentaires. Cet article explique certaines des propriétés supplémentaires.

La propriété pointerId

Le ID du pointeur est une propriété d'événement de pointeur qui vous aide à identifier chaque entrée de pointeur unique, telle qu'un stylet, un doigt ou une souris. Chaque entrée de pointeur reçoit un identifiant unique (généré automatiquement par le navigateur) qui vous permettra de les suivre et d'effectuer des opérations sur elles.

Une grande utilisation pour le ID du pointeur property est une application de jeu dans laquelle les utilisateurs utilisent simultanément plusieurs doigts ou stylets. Le ID du pointeur La propriété vous permet de garder une trace de chaque surface de pointeur en attribuant un identifiant unique à chacune d'elles. L'ID principal est attribué à la première entrée du pointeur.

Cette propriété est particulièrement utile pour les appareils tactiles. Les appareils qui s'appuient sur les pointeurs de la souris ne peuvent avoir qu'une seule entrée de pointeur à la fois sans qu'un périphérique externe ne leur soit connecté.

Voici un exemple simple qui imprime l'ID de chaque entrée de pointeur sur la console :

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

La propriété pointerType

La propriété pointerType vous aide à distinguer les différents types d'entrées de pointeur et vous permet d'effectuer des opérations basées sur celles-ci. Vous pouvez faire la différence entre une souris, un stylet et un toucher du doigt. Cette propriété ne peut accepter qu'une des trois entrées de chaîne: "souris", "stylo" ou "toucher". Voici un exemple simple de la façon d'utiliser le Type de pointeur propriété:

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

Les propriétés de largeur et de hauteur

Ces propriétés représentent la largeur et la hauteur de la zone de contact du pointeur en millimètres. Certains navigateurs ne les prennent pas en charge et leur valeur sera toujours 1 dans ces navigateurs.

Un bon cas d'utilisation de ces propriétés sera dans les applications qui nécessitent une entrée précise ou qui doivent différencier les tailles des différentes entrées. Par exemple, dans une application de dessin, une hauteur et une largeur plus grandes peuvent signifier que l'utilisateur dessine avec un trait plus large et vice versa.

La plupart du temps, vous utiliserez probablement les propriétés width et height pour les événements tactiles.

Utilisez les événements de pointeur pour plus d'inclusivité

Les événements de pointeur vous permettent de répondre à un large éventail de périphériques et de types d'entrée sans subir beaucoup de stress. Vous devez toujours les utiliser dans vos applications pour vous conformer aux normes modernes et contribuer à créer un meilleur Web.