Événements de souris

Découvrez les bases de l'utilisation des événements de souris en JavaScript

En savoir plus surÉvénements JavaScript

Lorsque vous regardez les événements de souris, nous avons la possibilité d'interagir avec

  • mousedownle bouton de la souris a été enfoncé
  • mouseuple bouton de la souris a été relâché
  • clickun événement de clic
  • dblclickun événement de double clic
  • mousemovelorsque la souris est déplacée sur l'élément
  • mouseoverlorsque la souris est déplacée sur un élément ou l'un de ses éléments enfants
  • mouseenterlorsque la souris est déplacée sur un élément. Semblable àmouseovermais ne bouillonne pas (plus à ce sujet bientôt!)
  • mouseoutlorsque la souris est déplacée hors d'un élément et lorsque la souris entre dans un élément enfant
  • mouseleavelorsque la souris est déplacée hors d'un élément. Semblable àmouseoutmais ne bouillonne pas (plus à ce sujet bientôt!)
  • contextmenulorsque le menu contextuel est ouvert, par exemple en cliquant avec le bouton droit de la souris

Les événements se chevauchent. Lorsque vous suivez unclickévénement, c'est comme suivre unmousedownsuivi d'unmouseupun événement. Dans le cas dedblclick,clickest également renvoyé deux fois.

mousedown,mousemoveetmouseuppeut être utilisé en combinaison pour suivre les événements de glisser-déposer.

Attention àmousemove, car il se déclenche plusieurs fois pendant le mouvement de la souris. Nous devons postulerétranglement, ce dont nous parlerons davantage lorsque nous analyserons le défilement.

À l'intérieur d'un gestionnaire d'événements, nous avons accès à de nombreuses propriétés.

Par exemple, lors d'un événement de souris, nous pouvons vérifier quel bouton de la souris a été enfoncé en cochantbuttonpropriété de l'objet événement:

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // mouse button pressed
  console.log(event.button) //0=left, 2=right
})

Voici toutes les propriétés que nous pouvons utiliser:

  • altKeytrue si la touche Alt a été enfoncée lors du déclenchement de l'événement
  • buttonle cas échéant, le numéro du bouton qui a été enfoncé lorsque l'événement de souris a été déclenché (généralement 0 = bouton principal, 1 = bouton du milieu, 2 = bouton droit). Fonctionne sur les événements provoqués en cliquant sur le bouton (par exemple, les clics)
  • buttonsle cas échéant, un nombre indiquant le (s) bouton (s) appuyé (s) sur un événement de souris.
  • clientX/clientYles coordonnées x et y du pointeur de la souris par rapport à la fenêtre du navigateur, quel que soit le défilement
  • ctrlKeytrue si la touche Ctrl a été enfoncée lors du déclenchement de l'événement
  • metaKeytrue si la touche méta a été enfoncée lors du déclenchement de l'événement
  • movementX/movementYles coordonnées x et y du pointeur de la souris par rapport à la position du dernier événement mousemove. Utilisé pour suivre la vitesse de la souris tout en la déplaçant
  • regionutilisé dans l'API Canvas
  • relatedTargetla cible secondaire de l'événement, par exemple lors du déplacement
  • screenX/screenYles coordonnées x et y du pointeur de la souris dans les coordonnées de l'écran
  • shiftKeytrue si la touche Maj a été enfoncée lors du déclenchement de l'événement

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de didacticiels sur le navigateur: