Firefox Mousemove event.which

Question

Sto scrivendo un'app per il disegno su tela HTML5 e devo essere in grado di dire se il pulsante sinistro del mouse è premuto o meno durante un evento mousemove. Su Chrome, questo funziona:

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

Ma in FireFox, event.which sempre è 1, non importa se non si preme il pulsante.

Come è possibile rilevare se il pulsante del mouse viene premuto durante un evento mousemove?

Answer 1

In breve, non è possibile. MDN, per esempio, explains:

Quando si verifica un evento di pulsante del mouse, una serie di proprietà aggiuntive sono disponibili per determinare quali pulsanti del mouse sono stati premuti e la posizione del puntatore del mouse. La proprietà del pulsante dell'evento può essere utilizzata per determinare quale pulsante è stato premuto, dove i valori possibili sono 0 per il pulsante sinistro, 1 per il pulsante centrale e 2 per il pulsante destro. Se il mouse è stato configurato in modo diverso, questi valori potrebbero essere diversi da .

...

Le proprietà del pulsante e di dettaglio sono valide solo per il pulsante del mouse eventi correlati, non eventi di movimento del mouse. Per l'evento MouseMove, ad esempio, entrambe le proprietà verrà impostato su 0.

Se si desidera, è possibile impostare a livello mondiale mousedown e mouseup gestori che impostare i flag in modo appropriato e quindi in qualsiasi punto nel tempo si può con grado di precisione relativo determina se/quale pulsante del mouse viene premuto.

Answer 2

È necessario utilizzare una variabile per mantenere lo stato del mouse. Quando si mousedown sulla tela impostato a true, e quando si mouseup sul documento impostato su false ..

In questo modo verrà cancellata ovunque si sceglie ..

Qualcosa di simile

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); 

Demo a http://jsfiddle.net/gaby/8JbaX/

Answer 3

in realtà, è possibile controllare event.buttons su Firefox che ti dice se il tasto sinistro, tasto destro o nessuno si premono. Avrai bisogno di una dichiarazione if per differenziare con Chrome che non ha event.buttons.

Answer 4

Io uso questa pseudo-polyfill per evitare problemi di 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 

    } 
} 

Io lo chiamo "pseudo" perché, mi costringe a controllare il tasto premuto mentre si muove in questo modo:

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

Invece di normale:

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