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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
mousedown eventChrome Support complet 2Edge Support complet 12Firefox Support complet 6IE Support complet 9Opera Support complet 11.6Safari Support complet 4WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 6Opera Android Support complet 12.1Safari iOS Support complet 3.2Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet

Voir aussi