Firefox Mousemove event.which

Question

我正在編寫一個HTML5畫布繪製應用程序，並且我需要能夠判斷在鼠標移動事件期間是否按下鼠標左鍵。在Chrome，這個工程：

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

但在Firefox，event.which 總是是1，無論按鈕是否被按下。

如何檢測mousemove事件期間是否按下鼠標按鈕？

Answer 1

總之，你不能。 MDN，例如，explains：

當鼠標按鈕事件發生時，一些額外的屬性 可用於確定被按下的是哪個鼠標按鈕和鼠標指針的位置 。可以使用事件的按鈕屬性 來確定按下哪個按鈕，其中 左側按鈕可能值爲0，中間按鈕爲1，右側按鈕爲2。 如果您以不同方式配置鼠標，這些值可能與 不同。

...

按鈕和細節屬性只適用於鼠標按鈕 相關的事件，而不是鼠標移動事件。對於鼠標移動事件， 例如，這兩個屬性將被設置爲0。

如果你願意，你可以設置全局mousedown和mouseup處理，在適當的時間，然後設置標誌在任何時候，你可以用準確度的相對程度決定了/是否按下了哪個鼠標按鈕。

Answer 2

您應該使用一個變量來保存mousedown的狀態。 當畫布上你mousedown其設置爲true，當你mouseup對文檔設置爲false ..

這樣，無論你點擊它會被清除..

像這樣的事情

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

演示在http://jsfiddle.net/gaby/8JbaX/

Answer 3

其實，你可以檢查event.buttons在Firefox，它告訴你，如果左鍵，右鍵或沒有被按下。您將需要一個if語句來與Chrome區分開來，因爲它沒有event.buttons。

Answer 4

我用這個僞填充工具以避免火狐的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 

    } 
} 

我把它稱爲「僞」，因爲它迫使我下來檢查一下按鍵，同時移動這樣：

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

而不是正常的：

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