Element : évènement mouseup

L'évènement mouseup est déclenché à partir d'un Element lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément. Les évènements mouseup peuvent être comparés aux évènements mousedown qui se produisent lorsqu'on appuie sur un bouton.

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

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 'mouseup' dans cette spécification.
Version de travail
Document Object Model (DOM) Level 3 Events Specification
La définition de 'mouseup' 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
mouseup eventChrome Support complet 2Edge Support complet 12Firefox Support complet 6IE Support complet 9Opera Support complet 11.6Safari Support complet 4WebView Android Support complet ≤37Chrome 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