Làm cách nào để kiểm tra trình duyệt hỗ trợ cảm ứng bằng JS/jQuery?

Question

Để thực hiện theo các phương pháp hay nhất, chúng tôi đang cố gắng sử dụng các sự kiện JavaScript/jQuery phù hợp theo thiết bị bạn đang sử dụng. Ví dụ: chúng tôi đang tạo trang web trên điện thoại di động có thẻ sẽ có sự kiện onclick hoặc touch. Trong trường hợp của một chiếc iPhone, chúng tôi muốn sử dụng sự kiện "touchstart". Chúng tôi muốn kiểm tra xem thiết bị của họ có hỗ trợ "touchstart" trước khi chúng tôi liên kết trình xử lý đó với đối tượng hay không. Nếu không, thì chúng tôi sẽ ràng buộc "onclick" thay thế.

Cách tốt nhất để làm điều này là gì?

Answer 1

Bạn có thể phát hiện nếu sự kiện này được hỗ trợ bởi:

if ('ontouchstart' in document.documentElement) { 
    //... 
} 

tặng một cái nhìn cho bài viết này:

• Detecting event support without browser sniffing

Các isEventSupported chức năng công bố ở đó, là thực sự tốt phát hiện nhiều sự kiện khác nhau và đó là trình duyệt chéo.

Answer 2

Bạn có thể kiểm tra xem typeof document.body.ontouchstart == "undefined" để rơi trở lại với các sự kiện dom bình thường

Answer 3

tôi đã thực hiện một demostration đầy đủ mà làm việc ở mọi trình duyệt với mã nguồn đầy đủ các giải pháp của vấn đề này: Detect touch screen devices in Javascript.

Answer 4

Sử dụng mã này để phát hiện xem thiết bị có hỗ trợ chạm hay không.

Đồng thời làm việc cho windows 8 IE10 trong đó sử dụng sự kiện 'MSPointerDown' thay vì 'touchmove'

var supportsTouch = false; 
if ('ontouchstart' in window) { 
    //iOS & android 
    supportsTouch = true; 

} else if(window.navigator.msPointerEnabled) { 

    // Windows 
    // To test for touch capable hardware 
    if(navigator.msMaxTouchPoints) { 
     supportsTouch = true; 
    } 

}