檢測觸摸屏桌面

Question

我的最終願望是允許使用觸摸屏桌面的用戶（不帶鼠標或鍵盤的一體機）在使用工具提示的網站上導航。使用鼠標懸停在工具提示上打開它，工具提示包含可點擊的鏈接。使用觸摸屏，沒有懸停，只有'觸摸'/點擊。在這兩種情況下，一旦用戶有鼠標，另一次用戶有觸摸屏，頁面將使用相同的瀏覽器顯示在同一操作系統上。

所以我需要區分兩者：一臺帶鼠標的臺式電腦和一臺沒有鼠標的觸摸屏臺式電腦。 Modernizr touch測試（http://modernizr.github.com/Modernizr/touch.html）在觸摸屏桌面上完全失敗（http://shop.lenovo.com/us/landing_pages/thinkcentre/2010/m90z）。嗅探UA或瀏覽器也不起作用。

（相當數量的搜索後，所有檢測試圖區分不同版本的手機或平板電腦，瀏覽器，用戶代理...正在使用同一個瀏覽器在相同的操作系統上運行的不是臺式機的觸摸屏。）

任何想法？

Answer 1

將事件監聽器touchstart和mousemove添加到您的頁面，然後等待用戶開始與您的頁面進行交互。如果第一個事件是mousemove，那麼用戶使用鼠標操作，所以它可能是一個桌面，否則這是一個觸摸屏。

$(document).on('touchstart.desktopDetect mousemove.desktopDetect', function(ev) { 
    window.IS_TOUCHSCREEN_DEVICE = (ev.type == 'touchstart'); 
    $(document).off('.desktopDetect'); 
}); 

檢查工作示例這裏： https://jsfiddle.net/evpozdniakov/uvb51cnm/embedded/result/