Element : évènement mousemove

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété gestionnaire d'évènement.

addEventListener("mousemove", (event) => { })

onmousemove = (event) => { }

Type d'évènement

Un objet MouseEvent. Hérite de UIEvent et de Event.

Exemples

L'exemple suivant utilise les évènements mousedown, mousemove et mouseup pour permettre à l'utilisateur·ice de dessiner sur un canevas HTML. Le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire.

Lorsque la page se charge, les constantes mesImages et contexte sont créées pour stocker une référence au canevas et au contexte 2D que nous utilisons pour dessiner.

Le dessin commence lorsque l'évènement mousedown est déclenché. On stocke d'abord les coordonnées x et y du pointeur de la souris dans les variables x et y, puis on passe isDrawing à true.

Lorsque la souris se déplace sur la page, l'évènement mousemove est déclenché. Si isDrawing vaut true, le gestionnaire d'évènement appelle la fonction dessinerLigne pour dessiner une ligne entre les coordonnées x et y stockées et la position actuelle.

Lorsque la fonction dessinerLigne() a fini son exécution, on ajuste les coordonnées et on les stocke dans x et y.

L'évènement mouseup dessine le segment final, passe x et y à 0 et arrête le dessin en passant isDrawing à false.

HTML

<h1>Dessiner grâce aux évènements de souris</h1>
<canvas id="myPics" width="560" height="360"></canvas>

CSS

canvas {
  border: 1px solid black;
  width: 560px;
  height: 360px;
}

JavaScript

// Lorsque true, déplacez la souris dessine sur le canevas
let isDrawing = false;
let x = 0;
let y = 0;

const mesImages = document.getElementById("myPics");
const context = mesImages.getContext("2d");

// event.offsetX, event.offsetY donne le décalage (x,y) par rapport au bord du canevas.

// Ajout des écouteurs d'évènements pour mousedown, mousemove et mouseup
mesImages.addEventListener("mousedown", (e) => {
  x = e.offsetX;
  y = e.offsetY;
  isDrawing = true;
});

mesImages.addEventListener("mousemove", (e) => {
  if (isDrawing) {
    dessinerLigne(context, x, y, e.offsetX, e.offsetY);
    x = e.offsetX;
    y = e.offsetY;
  }
});

window.addEventListener("mouseup", (e) => {
  if (isDrawing) {
    dessinerLigne(context, x, y, e.offsetX, e.offsetY);
    x = 0;
    y = 0;
    isDrawing = false;
  }
});

function dessinerLigne(context, x1, y1, x2, y2) {
  context.beginPath();
  context.strokeStyle = "black";
  context.lineWidth = 1;
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.stroke();
  context.closePath();
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Apprendre : Introduction aux évènements
• L'évènement mousedown
• L'évènement mouseup
• L'évènement click
• L'évènement dblclick
• L'évènement mouseover
• L'évènement mouseout
• L'évènement mouseenter
• L'évènement mouseleave
• L'évènement contextmenu
• L'évènement pointermove