Firefox Mousemove event.which

J'écris une application de dessin en toile HTML5, et je dois savoir si oui ou non le bouton gauche de la souris est enfoncé pendant un événement mousemove. Sur Chrome, cela fonctionne:

if (event.which == 1) { <do stuff> } 

Mais dans FireFox, event.which est toujours 1, même si le bouton est pressé.

Comment détecter si le bouton de la souris est pressé lors d'un événement mousemove?

Bref, vous ne pouvez pas. MDN, par exemple, explique :

Lorsqu'un événement de bouton de souris se produit, un certain nombre de propriétés supplémentaires sont disponibles pour déterminer les boutons de la souris et l'emplacement du pointeur de la souris. La propriété de bouton de l'événement peut être utilisée pour déterminer quel bouton a été pressé, si possible les valeurs sont 0 pour le bouton gauche, 1 pour le bouton du milieu et 2 pour le bouton droit. Si vous avez configuré votre souris différemment, ces valeurs peuvent être différentes.

Les propriétés des boutons et des détails s'appliquent uniquement aux événements liés au bouton de la souris, et non aux événements de mouvement de la souris. Pour l'événement mousemove, par exemple, les deux propriétés seront définies sur 0.

Si vous le souhaitez, vous pouvez configurer les mousedown et mouseup qui définissent les indicateurs de manière appropriée, puis, à tout moment donné, vous pouvez, avec un degré de précision relatif, déterminer si le bouton de la souris est pressé.

Vous devez utiliser une variable pour conserver l'état du mousedown. Lorsque vous mousedown sur la toile, définissez-le sur true, et lorsque vous mouseup sur le document, définissez-le sur false.

De cette façon, il sera dégagé partout où vous cliquez.

Quelque chose comme ça

 var isMouseDown = false; var draw = document.getElementById('draw'); document.addEventListener('mouseup', function(){ isMouseDown = false; }, false); draw.addEventListener('mousedown', function(e){ e.preventDefault(); // cancel element drag.. isMouseDown = true; }, false); draw.addEventListener('mousemove', function(e){ if (isMouseDown){ // do the drawing .. } }, false); 

Démo sur http://jsfiddle.net/gaby/8JbaX/

En fait, vous pouvez vérifier les event.buttons d' event.buttons sur Firefox qui vous indiquent si le bouton gauche, le bouton droit ou aucun sont pressés. Vous aurez besoin d'une instruction if pour différencier avec Chrome qui n'a pas de event.buttons d' event.buttons .

J'utilise ce pseudo-polyfill pour éviter les problèmes de FireFox mouseMove:

 function fixWhich(e) { if (!e.which && e.button) { // if no which, but button (IE8-) if (e.button & 1) e.which = 1; // left else if (e.button & 4) e.which = 2; // middle else if (e.button & 2) e.which = 3; // right } if (e.buttons) { //if there's buttons, i set new option buttondown (FF) if (e.buttons & 1) e.buttondown = 1; // left else if (e.buttons & 4) e.buttondown = 2; // middle else if (e.buttons & 2) e.buttondown = 3; // right } } 

Je l'appelle «pseudo» parce que cela me force à vérifier le bouton en bougeant de cette façon:

 if (e.buttondown === 1) { //do anything } 

Au lieu de normal:

 if (e.which === 1) { //do anything }