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.

Drag and drop: Drag events. Mozilla Developer Network,

SCHEPERS, Doug ; HÖHRMANN, Björn ; LE HÉGARET, Philippe, et al.. Document Object Model (DOM) Level 3 Events Specification. W3C, . 5.2.3 Mouse Event Types - mousedown