Mousedown et Mouseout sont sur un bateau...

Petite précision sur la succession d'événements souris, ou pourquoi l'événement mouseout ne part pas dans certaines conditions...

Nous avons besoin d'être avertit lorsqu'un utilisateur presse le bouton gauche de la souris sur un élément puis, le bouton toujours pressé, quand la souris quitte le dit élément. Les événements à écouter sont courants : mousedown et mouseout ; l'émission de ce dernier l'est un peu moins car l'action par défaut d'un mousedown peut déclencher un processus de glisser-déposer (drag & drop), processus qui bloque alors l'émission d'autres événements souris, nottament mouseout.

La solution, simple mais qu'il ne faut pas oublier d'appliquer (ce qui a été mon cas récemment, provoquant l'apparition d'un bug dont je n'arrivais pas à trouver la source), c'est de bloquer le comportement par défaut de l'événement mousedown :

myElement.addEventListener('mousedown', function (e) {
    // Arrêter le comportement par défaut pour que 
    // 'mouseout' puisse partir.
    e.preventDefault();
    // Traitements sur mousedown
}, false);

myElement.addEventListener('mouseout', function (e) {
    // Traitements sur mouseout.
}, false);
Code de base pour qu'un événement mouseout puisse toujours partir après un événement mousedown.
Titre
Drag and drop: Drag events
Editeur
Mozilla Developer Network
Date
Titre
Document Object Model (DOM) Level 3 Events Specification
Auteurs
Doug SCHEPERS
Auteurs
Björn HÖHRMANN
Auteurs
Philippe LE HÉGARET
Auteurs
PIXLEYTOM
Editeur
W3C
Date
Chapitre
5.2.3 Mouse Event Types - mousedown