2012-02-24 12 views
8

Trước đây, phương pháp tốt nhất để kiểm tra sự hiện diện của con chuột là tìm kiếm touch event support. Tuy nhiên, Chrome dành cho máy tính để bàn hiện hỗ trợ các sự kiện chạm, khiến cho thử nghiệm này không hoạt động.Làm thế nào tôi có thể xác định một cách đáng tin cậy nếu một trình duyệt hỗ trợ các sự kiện di chuột qua?

Có cách nào để kiểm tra trực tiếp cho hỗ trợ sự kiện di chuột qua, thay vì suy luận nó dựa trên sự hiện diện của các sự kiện chạm không?

Độ phân giải: Đây là mã hoạt động, dựa trên câu trả lời từ AshleysBrain.

jQuery(function() 
{ 
    // Has mouse 
    jQuery("body").one("mousemove", function(e) 
    { 
     attachMouseEvents(); 
    }); 

    // Has touchscreen 
    jQuery("body").one("touchstart", function(e) 
    { 
     // Unbind the mouse detector, as this will fire on some touch devices. Touchstart should always fire first. 
     jQuery("body").unbind("mousemove"); 

     attachTouchEvents(); 
    }); 
}); 
+0

Tuyệt vời! Đã thử với playbook (RIM OS), và hoạt động tốt lần đầu tiên, nhưng trên trang refresh nó phát hiện mousemove (!?). Tuy nhiên, gắn thử nghiệm vào một số #id thay vì cơ thể hoạt động hoàn hảo. – MaxD

Trả lời

5

Bạn có thể làm điều ngược lại của giải pháp cho detecting keyboard or touch input. Chỉ cần chờ một sự kiện cảm ứng hoặc sự kiện di chuyển chuột thực sự và quyết định dựa trên sự kiện đó. Nếu bạn kiểm tra sự hiện diện của một trình xử lý sự kiện, trình duyệt có thể cho biết nó có sự kiện ngay cả khi nó hiện không chạy trên phần cứng hỗ trợ nó, vì vậy điều đáng tin cậy duy nhất cần làm là đợi và xem các sự kiện thực sự cháy.

+0

Mặc dù tôi muốn có một cách sạch hơn để làm điều đó, điều này hóa ra lại là giải pháp hiệu quả. Tôi đang đăng mã của tôi trong câu hỏi về hậu thế. Cảm ơn bạn đã giúp đỡ! –

-1

Nếu các trang web có thể phát hiện rằng bạn đang sử dụng một trình duyệt di động một cách chính xác khi họ làm lý do tại sao bạn không thể sử dụng kỹ thuật tương tự để suy ra họ không có hỗ trợ di chuột?

+0

Điều gì sẽ xảy ra nếu nó là một máy tính bảng Android có gắn chuột (có thể thực hiện được)? Tôi đang tìm kiếm một giải pháp tương lai cụ thể cho các sự kiện chuột. (Tôi đã có kiểm tra vị trí cho Chrome và thiết bị di động dựa trên tác nhân người dùng, nhưng đại lý người dùng không phải lúc nào cũng đáng tin cậy.) –

+0

Yikes, không biết máy tính bảng Android có tùy chọn tệp đính kèm chuột! –

+0

Điên phải không? Đó là một trường hợp cạnh, nhưng nếu bạn cắm chuột vào một Android với một cổng USB, nó hoạt động. –

1

Bạn có thể muốn suy nghĩ về việc sử dụng Modernizr, bạn có thể làm một cái gì đó như sau bằng cách sử dụng phương pháp Modernizer.hasEvent() (docs):

Modernizr.hasEvent("mouseover", document); 
+0

Tôi không muốn chi phí của tất cả các Modernizr cho một nhiệm vụ cụ thể này, nhưng tôi đã có thể snip ra các chức năng isEventSupported và thay đổi nó để làm những gì tôi cần. Cảm ơn! –

+0

Tôi đã nói quá sớm. Modernizr.hasEvent ("mouseover") đánh giá đúng trên iPhone. –

0

Tôi đã thử cách này và nó hoạt động.

<html> 
<head> 
    <script type="text/javascript"> 
     function isEventSupported(eventName) { 
      var el = document.createElement("body"[eventName] || "div"); 
      var isSupported = "on" + eventName.toLowerCase() in el || top.Event && typeof top.Event == "object" && eventName.toUpperCase() in top.Event; 
      el = null; 
      return isSupported; 
     } 
    </script> 
</head> 

<body onload="alert(isEventSupported('mouseover'));">TEST mouseover event</body> 
</html> 

tôi mất chức năng isEventSupported từ http://www.strictly-software.com/eventsupport.htm

+0

Giải pháp này sẽ hoạt động, nhưng nếu bạn thử mã này trên iPhone, nó vẫn được đánh giá là đúng. Tôi nghi ngờ rằng các sự kiện liên lạc có khả năng kích hoạt tiêu điểm/di chuột qua mui xe, và vì vậy MobileSafari thấy sự kiện đó là hiện diện mặc dù không có chuột. –