检测触摸屏桌面

Question

我的终极愿望是允许用户使用触摸屏桌面(没有鼠标或键盘的一体机)在使用工具提示的网站上导航。使用鼠标将鼠标悬停在工具提示上可打开它，该工具提示包含可单击的链接。使用触摸屏，没有悬停，只有“触摸”/点击。在这两种情况下，页面将使用相同的浏览器显示在相同的操作系统上，一旦用户使用鼠标，其他时间用户使用触摸屏。

所以我需要区分这两者:一台带鼠标的台式计算机和一台不带鼠标的触摸屏台式计算机。在触摸屏台式机(http://shop.lenovo.com/us/landing_pages/thinkcentre/2010/m90z)上，现代触摸测试(http://modernizr.github.com/Modernizr/touch.html)完全失败。嗅探UA或浏览器也不起作用。

(经过相当多的搜索，所有的检测都试图区分不同版本的手机或平板电脑，浏览器，UAs……而不是使用相同浏览器在相同操作系统上运行的桌面触摸屏。)

有什么想法吗？

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/