Firefox Mousemove event.which

Question

Estoy escribiendo una aplicación de dibujo de lienzo HTML5, y necesito poder decir si se presiona o no el botón izquierdo del mouse durante un evento mousemove. En Chrome, esto funciona:

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

Pero en Firefox, event.which siempre es 1, no importa si es o no se pulsa el botón.

¿Cómo puedo detectar si se presiona el botón del mouse durante un evento mousemove?

Answer 1

En resumen, no se puede. MDN, por ejemplo, explains:

Cuando se produce un evento de botón del ratón, una serie de propiedades adicionales están disponibles para determinar qué botones del ratón se presiona y el ubicación del puntero del ratón. La propiedad del botón del evento se puede usar para determinar qué botón se presionó, donde los valores posibles son 0 para el botón izquierdo, 1 para el botón central y 2 para el botón derecho. Si configuró su mouse de manera diferente, estos valores pueden ser diferentes.

...

Las propiedades del botón y detalle sólo se aplican al botón del ratón eventos relacionados, no eventos de movimiento del ratón. Para el evento MouseMove, por ejemplo, ambas propiedades se establecerá en 0.

Si lo desea, puede establecer globales mousedown y mouseup manipuladores que Fije los indicadores corresponde y luego en cualquier punto dado en el tiempo que pueda con el grado relativo de precisión determina si/qué botón del mouse se presiona.

Answer 2

Debe usar una variable para mantener el estado del mousedown. Cuando mousedown en el lienzo ponemos a true, y cuando mouseup en el documento ponemos a false ..

De esta manera se borrará donde se haga clic ..

Algo como esto

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 en http://jsfiddle.net/gaby/8JbaX/

Answer 3

en realidad, se puede comprobar event.buttons en Firefox que te dice si no se presiona el botón izquierdo, botón derecho o ninguno. Necesitarás un enunciado if para diferenciarlo con Chrome que no tiene event.buttons.

Answer 4

Yo uso este pseudo-polyfill para evitar problemas 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 

    } 
} 

lo llamo "pseudo" porque, me obliga a comprobar el botón hacia abajo mientras se mueve de esta manera:

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

en lugar de lo normal:

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