Sự kiện Firefox Mousemove.which

Question

Tôi đang viết một ứng dụng vẽ canvas HTML5 và tôi cần phải biết có hay không nút chuột trái được nhấn xuống trong một sự kiện di chuột. Trên Chrome, việc này:

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

Nhưng trong FireFox, event.which luôn là 1, không có vấn đề hay không nút được nhấn.

Làm cách nào để phát hiện nút chuột được nhấn trong sự kiện di chuột?

Answer 1

Tóm lại, bạn không thể. MDN, ví dụ, explains:

Khi một sự kiện xảy ra nút chuột, một số thuộc tính bổ sung có sẵn để xác định các nút chuột được nhấn và vị trí của con trỏ chuột. Thuộc tính nút của sự kiện có thể được sử dụng để xác định nút nào được nhấn, trong đó các giá trị có thể là 0 cho nút bên trái, 1 cho nút giữa và 2 cho nút bên phải. Nếu bạn đã định cấu hình chuột của mình khác nhau, các giá trị này có thể là khác nhau.

...

Nút và chi tiết các thuộc tính chỉ áp dụng cho nút chuột sự kiện liên quan, chứ không phải chuột di chuyển các sự kiện. Đối với các sự kiện MouseMove, ví dụ, cả hai thuộc tính sẽ được thiết lập để 0.

Nếu bạn muốn, bạn có thể đặt toàn cầu mousedown và mouseup xử lý chính xác đến cờ một cách thích hợp và sau đó tại bất kỳ điểm nào trong thời gian bạn có thể với độ chính xác tương đối xác định nếu nút chuột nào được nhấn.

Answer 2

Bạn nên sử dụng biến để giữ trạng thái của mousedown. Khi bạn mousedown trên vải đặt nó là sự thật, và khi bạn mouseup trên các tài liệu thiết lập nó là false ..

Bằng cách này nó sẽ bị xóa bất cứ nơi nào bạn bấm ..

Something như

này

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

Answer 3

trên thực tế, bạn có thể kiểm tra event.buttons trên Firefox mà nói với bạn nếu nút trái, nút bên phải hoặc không được ép. Bạn sẽ cần một câu lệnh if để phân biệt với Chrome không có số event.buttons.

Answer 4

tôi sử dụng này giả polyfill để tránh các vấn đề 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 

    } 
} 

tôi gọi nó là "giả" bởi vì, nó buộc tôi để kiểm tra nút xuống trong khi di chuyển theo cách này:

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

Thay vì bình thường:

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