2012-05-24 14 views
10

Có cách nào để phát hiện xem ứng dụng có đang sử dụng bàn di chuột so với chuột có Javascript không?Phát hiện bàn di chuột và chuột trong Javascript

Hoặc ít nhất để có được ước tính hợp lý về số lượng người dùng sử dụng bàn di chuột thay vì chuột?

+1

Bạn có nghĩa là thiết bị màn hình cảm ứng hoặc thiết bị chuột cảm ứng không? Sự khác biệt đầu tiên là tầm thường, thứ hai là không thể. – apsillers

+0

@apsillers: Thiết bị chuột Touch-pad. – Fragsworth

Trả lời

2

Trong trường hợp chung, không có cách nào để thực hiện những gì bạn muốn. ActiveX có thể cho phép bạn xem và kiểm tra thiết bị USB, nhưng trong trường hợp tốt nhất, ngay cả khi điều đó có thể bằng cách nào đó, điều đó giới hạn bạn với người dùng IE. Ngoài ra, không có cách nào để biết.

Bạn có thể phân biệt các mẫu trong cách (hoặc tần suất) người dùng di chuột di chuyển con trỏ so với cách người dùng chuột có thể di chuyển con trỏ. Phân biệt giữa các thiết bị đầu vào vật lý theo cách này là một viễn cảnh khó khăn vô lý, và có thể hoàn toàn không thể, vì vậy tôi đưa vào đây nó chỉ để hoàn thành.

7

Bạn có thể phát hiện sự kiện JS.

Thiết bị cảm ứng sẽ kích hoạt các sự kiện chạm như touchstart ngoài các sự kiện chuột.

Thiết bị không chạm sẽ chỉ kích hoạt sự kiện chuột.

+0

Đối với bất cứ ai nhìn vào câu hỏi này gần đây, tôi đã tìm kiếm xung quanh và tôi không nghĩ rằng điều này là đúng trên tất cả các trình duyệt, nếu có. Rất muốn thấy một nguồn để cho biết rằng các bàn di chuột kích hoạt sự kiện chạm. – minorcase

+1

@minorcase hmm ... bây giờ tôi đã đọc lại câu hỏi, tôi không chắc liệu OP có đề cập đến thiết bị cầm tay cụ thể hay bất kỳ đầu vào ngoại vi cảm ứng nào không. Tôi đồng ý, một touch pad (nói, nối với một máy tính) sẽ không được * nhìn thấy * như một thiết bị cảm ứng. Câu trả lời của tôi là cụ thể về thiết bị nói chung (ví dụ: trình duyệt dành cho thiết bị di động so với trình duyệt trên máy tính để bàn). –

+1

Vì vậy, để rõ ràng, nếu chúng ta đang nói về việc phân biệt một cú click chuột từ một touchpad, hãy nhấp vào một cái gì đó giống như một máy tính xách tay, AFAIK, bạn không thể phân biệt chúng thông qua JS. –

-2

này nên làm việc:

if ("ontouchstart" in window) ... 
+0

Sử dụng chrome ví dụ với macbook có bàn di chuột sẽ không có sự kiện này –

+0

nó không hoạt động trong chrome như David đã nói – puppeteer701

9

chủ đề này có thể đã được giải quyết, nhưng câu trả lời là không có cách nào để phát hiện nó. Tôi cần một giải pháp, điều đó rất quan trọng. Vì vậy, tôi tìm thấy một giải pháp chấp nhận được cho vấn đề này:

var scrolling = false; 
var oldTime = 0; 
var newTime = 0; 
var isTouchPad; 
var eventCount = 0; 
var eventCountStart; 

var mouseHandle = function (evt) { 
    var isTouchPadDefined = isTouchPad || typeof isTouchPad !== "undefined"; 
    console.log(isTouchPadDefined); 
    if (!isTouchPadDefined) { 
     if (eventCount === 0) { 
      eventCountStart = new Date().getTime(); 
     } 

     eventCount++; 

     if (new Date().getTime() - eventCountStart > 100) { 
       if (eventCount > 10) { 
        isTouchPad = true; 
       } else { 
        isTouchPad = false; 
       } 
      isTouchPadDefined = true; 
     } 
    } 

    if (isTouchPadDefined) { 
     // here you can do what you want 
     // i just wanted the direction, for swiping, so i have to prevent 
     // the multiple event calls to trigger multiple unwanted actions (trackpad) 
     if (!evt) evt = event; 
     var direction = (evt.detail<0 || evt.wheelDelta>0) ? 1 : -1; 

     if (isTouchPad) { 
      newTime = new Date().getTime(); 

      if (!scrolling && newTime-oldTime > 550) { 
       scrolling = true; 
       if (direction < 0) { 
        // swipe down 
       } else { 
        // swipe up 
       } 
       setTimeout(function() {oldTime = new Date().getTime();scrolling = false}, 500); 
      } 
     } else { 
      if (direction < 0) { 
       // swipe down 
      } else { 
       // swipe up 
      } 
     } 
    } 
} 

Và đăng ký các sự kiện:

document.addEventListener("mousewheel", mouseHandle, false); 
document.addEventListener("DOMMouseScroll", mouseHandle, false); 

Nó có thể cần một số tối ưu hóa và có lẽ ít hơn hoàn hảo, nhưng nó hoạt động! Ít nhất nó có thể phát hiện một trackpad macbook. Nhưng do thiết kế tôi muốn nói nó nên làm việc bất cứ nơi nào mà pad giới thiệu rất nhiều cuộc gọi sự kiện.

Dưới đây là cách hoạt động:

Khi người dùng cuộn đầu tiên, nó sẽ phát hiện và kiểm tra xem trong 50ms không quá 5 sự kiện đã kích hoạt, mà là khá bất thường đối với một con chuột bình thường, nhưng không phải cho một trackpad .

Sau đó, có một phần khác, không quan trọng cho việc phát hiện, mà là một mẹo để gọi một chức năng một lần như khi người dùng vuốt. Hãy đến với tôi nếu tôi không đủ rõ ràng, rất khó để làm việc này, và dĩ nhiên là một giải pháp ít lý tưởng hơn.

Chỉnh sửa: Tôi đã tối ưu hóa mã ngay bây giờ nhiều nhất có thể. Nó phát hiện các mouseroll trên lần thứ hai và swipe trên trackpad ngay lập tức. Loại bỏ cũng rất nhiều mã lặp lại và không cần thiết.

Chỉnh sửa 2 Tôi đã thay đổi số để kiểm tra thời gian và số lượng sự kiện được gọi tương ứng từ 50 đến 100 và 5 đến 10. Điều này sẽ mang lại một phát hiện chính xác hơn.

+1

[Ở đây] (http://jsfiddle.net/ucLe3hLa/) là một câu đố với mã này để kiểm tra dễ dàng hơn kết quả cuối cùng. –

+1

Cảm ơn. Tôi sử dụng mã này ngay trên trang web sản xuất của mình và nó hoạt động rất tốt. Tôi sửa đổi fiddle của bạn để có được một kết quả ngay lập tức: https://jsfiddle.net/ucLe3hLa/1/ –

+0

Giả định "không quá 5 sự kiện trong 50ms" không giữ cho con chuột của tôi. Làm thế nào bạn đến với nó? –

0

Bạn chỉ có thể kiểm tra phần mềm trình điều khiển thiết bị được cài đặt vào gói địa phương làm chức năng. Giống như trong cửa sổ synaptics, phần cứng elan, như đối với UNIX (Linux), bạn chỉ có thể kiểm tra gói được cài đặt trong khi cài đặt cơ bản lên.Rất nhiều gói có các định dạng khác nhau trong các phiên bản khác nhau của Linux và Linux như các hệ thống (Không hoàn toàn là linux) nhưng chúng sử dụng cùng một tên gói cho tất cả. Chỉ cần biết mã để kéo nó. Vẫn đang làm việc trên nó.