Phát hiện con lăn chuột trên trục x (trái và phải) với Javascript

Question

Tôi biết có thể phát hiện lên và xuống, ví dụ:

function handle(delta) { 
    if (delta < 0) { 
     alert('down'); 
} else { 
    alert('up'); 
    } 
} 

function wheel(event){ 
    var delta = 0; 
    if (!event) event = window.event; 
    if (event.wheelDelta) { 
     delta = event.wheelDelta/120; 
    } else if (event.detail) { 
     delta = -event.detail/3; 
    } 
    if (delta) 
     handle(delta); 
     if (event.preventDefault) 
       event.preventDefault(); 
     event.returnValue = false; 
} 

/* Initialization code. */ 
if (window.addEventListener) 
    window.addEventListener('DOMMouseScroll', wheel, false); 
window.onmousewheel = document.onmousewheel = wheel;​ 

Nhưng có cách nào để phát hiện xem chuột của người dùng có trái hoặc phải bằng con lăn chuột không?

Answer 1

• Sự kiện DOMMouseWheel trong Firefox có thuộc tính axis.

• Sự kiện mousewheel trong Chrome có wheelDeltaX và wheelDeltaY.

• Đáng buồn thay, tôi không thể tìm thấy bất kỳ sự thích hợp tương đương nào cho các sự kiện IE (thử nghiệm trên IE9).

Answer 2

Tôi tin rằng bạn có thể tìm thấy dữ liệu 'ngang' hoặc trục x từ

event.originalEvent.wheelDeltaX 

Bạn nên gỡ lỗi mã, và xem những gì thuộc tính của đối tượng sự kiện có khi chạy. Điều này sẽ xác nhận hoặc từ chối nếu thuộc tính đó tồn tại. Từ đó, nó chỉ là vấn đề phát hiện nếu giá trị khác nhau.

Answer 3

Kiểm tra câu trả lời được chấp nhận để biết thêm liên kết và thông tin.

Bubbling scroll/mousewheel event

event.detail quy định cụ thể số lượng "ve" rằng bánh xe chuột di chuyển.

Giá trị dương nghĩa down/cái đúng", tiêu cực lên/trái.

event.axis xác định trục của cử chỉ cuộn (ngang hoặc dọc). Thuộc tính này đã được bổ sung trong phiên bản Firefox 3.5

Chrome thực hiện các hành vi tương tự như IE AFAIK Trong IE và Chrome:. sử dụng e.wheelDeltaX và e.wheelDeltaY

Answer 4

Internet Explorer: Trong IE9 và IE10 bạn phải sử dụng các onwheel sự kiện (không phải là onmousewheel, cũng không DOMMouseScroll) sử dụng addEventListener để có thể phát hiện sự di chuyển bánh xe ngang từ DOM. Sử dụng giá trị event.deltaX cùng với giá trị event.deltaMode để phát hiện bánh xe chuột ngang (cho bánh xe dọc sử dụng giá trị event.deltaY). Đối với < = IE8 sử dụng sự kiện onmousewheel và event.wheelDelta (chỉ có bánh xe chuột yaxis được hỗ trợ cho các phiên bản IE cũ hơn).

Blink/Webkit: Hỗ trợ từ Chrome 31/Safari 7 cho sự kiện onwheel. Nếu không, hãy sử dụng sự kiện onmousewheel và các thuộc tính event.wheelDeltaX và event.wheelDeltaY. Bí quyết chỉ dành cho Chrome/Safari: sử dụng phím SHIFT trong khi di chuyển con lăn sang trái/phải (hữu ích để thử nghiệm).

Firefox: Firefox 17 trở lên support the onwheel event. Để hỗ trợ các phiên bản cũ hơn của Firefox (quay lại 3.6), hãy sử dụng các thuộc tính hiện tại không được chấp nhận DOMMouseScroll và event.axis và event.detail để hỗ trợ cuộn ngang. (Firefox di động: các tài liệu ngụ ý rằng sự kiện onwheel sẽ kích hoạt khi panning bằng cách sử dụng một thiết bị cảm ứng. Tôi đã không thử nó.). Firefox cũng có sự kiện MozMousePixelScroll. Tài liệu MDN cũng cung cấp mã đề xuất để xử lý các sự kiện khác nhau trên các trình duyệt. Firefox cũng có cấu hình mousewheel.enable_pixel_scrolling có thể ảnh hưởng đến tất cả các sự kiện bánh xe khác nhau.

Try the onwheel event out yourself bằng trình kiểm tra sự kiện bánh xe từ QuirksMode. Tôi có thể thấy điều này làm việc bằng cách sử dụng IE9 trên Win7, và IE10 trên Windows 8 (bản xem trước phát hành, phiên bản IE 10.0.8400.0). Để thiết lập sự kiện onwheel chuẩn mới:

• Chọn radio addEventListener (chụp).
• Cuộn chưa được sửa.
• Nhấp chuột trái phép.
• Để lại bánh xe được đánh dấu.
• Đánh dấu chọn các thuộc tính sự kiện ở cuối cột bên phải.
• Sử dụng F12 và xác nhận rằng tài liệu có trong documentMode Tiêu chuẩn IE9 hoặc Tiêu chuẩn IE10.
• Thực hiện một số bánh xe chuột trên cột giữa và xem các sự kiện bánh xe được đăng nhập ở cột bên trái và chi tiết sự kiện bánh xe hiển thị ở dưới cùng của cột bên phải.
• Đôi khi bạn có thể cần phải untick và retick hộp kiểm kiện bánh xe để có được sự kiện (không chắc chắn lý do tại sao: có lẽ lỗi trong trang quirksmode hoặc trong IE?)

Các W3C specification, các Microsoft IE9 documentation for the MouseWheel event và MDN docs chỉ định cho các onwheel sự kiện:

• deltaX - Gets khoảng cách mà một bánh xe chuột đã xoay xung quanh trục x (ngang).
• deltaY - Lấy khoảng cách mà bánh xe chuột đã xoay quanh trục y (dọc).
• deltaZ - Lấy khoảng cách mà bánh xe chuột đã xoay quanh trục z.
• deltaMode - Gets một giá trị cho biết đơn vị đo cho giá trị đồng bằng:
  • DOM_DELTA_PIXEL (0x00) mặc định. Đồng bằng được đo bằng pixel.
  • DOM_DELTA_LINE (0x01) Đồng bằng được đo bằng dòng văn bản.
  • DOM_DELTA_PAGE (0x02) Đồng bằng được đo trong các trang văn bản.

Edit: chắc chắn rằng bạn KHÔNG preventDefault() sự kiện này nếu event.ctrlKey được thiết lập, nếu không bạn có thể sẽ ngăn không cho trang phóng to. Cũng rõ ràng ctrlKey được đặt thành true nếu bạn sử dụng pinch-zoom trên bàn di chuột trong Chrome và IE.

phát hiện tính năng khó trong IE:

• Trong IE10 với IE8 documentMode, 'onwheel' in document trả về true nhưng có vẻ như có sự kiện nào được sa thải vì sự kiện onwheel ngang hoặc dọc.
• Trong IE9 'onwheel' in document trả về sai nhưng sự kiện onwheel hoạt động (tôi đoán rằng document.documentMode === 9 phải được kiểm tra trước khi sử dụng sự kiện onwheel trong IE9).
• Trong IE9 và IE10 truyền thống document.onwheel = 'somefunc(event)' dường như không hoạt động ngay cả trong documentMode 9 hoặc 10 (nghĩa là bạn chỉ có thể sử dụng addEventListener).

Để kiểm tra, hãy sử dụng chuột xoay của Microsoft, bàn di chuột (cử chỉ hoặc vùng) hoặc thiết bị Apple (chuột ma thuật hoặc cuộn chuột lớn). Chơi với nhiều cài đặt chuột hoặc bàn di chuột khác nhau trong cửa sổ (hoặc sở thích chuột trên OSX nếu thử nghiệm cuộn ngang trên OSX với Safari).

Dấu hiệu của các giá trị delta có dấu hiệu ngược đối với bánh xe và onmousewheel cho tất cả các trình duyệt. Trong IE các giá trị châu thổ khác nhau đối với onwheel và onmousewheel, ví dụ (sử dụng máy dev của tôi với IE9 với Microsoft chuột rất chuẩn):

• event.deltaY là 111 trên Win8 hoặc 72 trên Win7 cho onwheel sự kiện di chuyển xuống một notch. Giá trị thay đổi một chút với zoom, nhưng có một số yếu tố khác liên quan cũng như tôi không thể làm việc ra (dường như không có kích thước font).

• event.wheelDelta là -120 cho onmousewheel sự kiện cuộn xuống một bậc.

• Đối với Windows XP: "Chúng tôi có thêm hỗ trợ cho thông điệp WM_MOUSEHWHEEL để làm công việc mà [, hỗ trợ] đã được bổ sung trong Vista vì vậy nếu bạn đang sử dụng XP, bạn cần IntelliType Pro và/hoặc IntelliPoint cài đặt" - theo this article .

• Trình điều khiển chuột và chuột cảm ứng phổ biến khác phá vỡ hỗ trợ bánh xe chuột cho các trình duyệt, ví dụ: phát hiện trình duyệt bị hỏng hoặc sử dụng các tin nhắn WM_HSCROLL và WM_VSCROLL thay vì các tin nhắn WM_MOUSEWHEEL và WM_MOUSEHWHEEL. Vì vậy, trình điều khiển sẽ không tạo ra sự kiện bánh xe trong trình duyệt (bất kể trình duyệt bạn đã sử dụng hoặc phiên bản Windows nào bạn đã sử dụng). A search of Bugzilla for WM_VSCROLL hiển thị các sự cố có thể ảnh hưởng đến bất kỳ trình duyệt nào (không chỉ Firefox).

Answer 5

IE hỗ trợ tất cả trong số họ: mousewheel | onmousewheel đó là những event handlers cũng như WheelEvent (cung cấp DeltaX, DeltaY, DeltaZ) là standard Event và MouseWheelEvent interface, đó là also supported trong IE9 + (với WheelDelta và số x khác, y tọa độ các thuộc tính liên quan).

Đã kiểm tra trên IE11.

Liên quan: Hôm nay khi sự kiện chạm tiêu chuẩn cuối cùng được chính thức hóa, hóa ra IE11 đã hỗ trợ hầu hết trong số đó: http://blogs.msdn.com/b/ie/archive/2015/02/24/pointer-events-w3c-recommendation-interoperable-touch-and-removing-the-dreaded-300ms-tap-delay.aspx.

Ngoài: @bob_cobb, bạn có thể muốn truy cập lại câu trả lời được chấp thuận của mình để ủng hộ most voted with most richer details one. Điều này để giúp khách truy cập trong tương lai tìm thấy thông tin chính xác và cho bạn thấy thậm chí quan tâm đến cộng đồng!