Element : évènement mousedown

L'évènement mousedown est déclenché à partir d'un Element lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.

Note : Cet évènement est différent de click. click est déclenché après qu'un clic "entier" ait eu lieu (c'est-à-dire quand le bouton a été pressé puis relaché tandis que le pointeur était sur le même élément). mousedown est déclenché dès qu'on appuie sur le bouton.

Se propage/remonte dans le DOM	Oui
Annulable	Oui
Interface	`MouseEvent`
Propriété pour la gestion d'évènement	`onmousedown`

Exemples

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

Lors du chargement de la page, les constantes myPics et context sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante rect permet de stocker les coordonnées relatives du canevas par rapport à la page.

Le dessin commence quand l'évènement mousedown est déclenché. On stocke les coordonnées du pointeur dans les variables x et y puis on passe la variable isDrawing à true pour indiquer qu'un dessin est en cours.

Lorsque le pointeur 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 drawLine() afin de dessiner une ligne entre le point de coordonnées x et y (stockées dans ces variables) et la position actuelle (N.B. les coordonnées x et y sont "corrigées" avec la constante rect pour tenir compte du décalage entre le canevas et la page).

Lorsque la fonction drawLine() a fini son exécution, on ajuste les coordonnées courante en les stockant dans x et y.

Lorsque l'évènement mouseup est déclenché, on dessine le segment final du dessin en cours, on passe x et y à 0 puis on 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

// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de
// la souris entraîne un dessin sur le canevas
let isDrawing = false;
let x = 0;
let y = 0;

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

// On récupère le décalage du canevas en x et y par rapport aux bords
// de la page
const rect = myPics.getBoundingClientRect();

// On ajoute les gestionnaires d'évènements pour mousedown, mousemove
// et mouseup
myPics.addEventListener('mousedown', e => {
  x = e.clientX - rect.left;
  y = e.clientY - rect.top;
  isDrawing = true;
});

myPics.addEventListener('mousemove', e => {
  if (isDrawing === true) {
    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
    x = e.clientX - rect.left;
    y = e.clientY - rect.top;
  }
});

window.addEventListener('mouseup', e => {
  if (isDrawing === true) {
    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
    x = 0;
    y = 0;
    isDrawing = false;
  }
});

function drawLine(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

Spécification	État
UI Events La définition de 'mousedown' dans cette spécification.	Version de travail
Document Object Model (DOM) Level 3 Events Specification La définition de 'mousedown' dans cette spécification.	Obsolete

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

Une introduction aux évènements
D'autres évènements connexes