Javascript 如何在浏览器上检查真正的触摸支持
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8764020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I check for real touch support on a browser
提问by Oscar Godson
Today (or very recently) Chrome Beta updated to 17 for me and with it i noticed some funkiness in my web app. I noticed it was because a class was being added to the body element that normally only gets put there if there is touch event support which I check like this:
今天（或最近）Chrome Beta 更新到了 17，我注意到我的网络应用程序有一些奇怪的地方。我注意到这是因为一个类被添加到 body 元素中，通常只有在有触摸事件支持时才会放置在那里，我像这样检查：
try {
document.createEvent("TouchEvent");
_device.touch = true;
} catch (e) {
_device.touch = false;
}
And sure enough, i can create and trigger touch events on Chrome 17. First idea i had was, oh, i can check for touch, and see if a mouse click fails, therefore, there's a mouse, but MouseEvents trigger too.
果然，我可以在 Chrome 17 上创建和触发触摸事件。我的第一个想法是，哦，我可以检查触摸，看看鼠标点击是否失败，因此，有一个鼠标，但 MouseEvents 也会触发。
How else can I check, without user agent sniffing, that it's an actual, touchable, device, and not just a browser that supports touch events.
在没有用户代理嗅探的情况下，我还能如何检查它是一个实际的、可触摸的设备，而不仅仅是一个支持触摸事件的浏览器。
回答by Ry-
Try:
尝试：
'ontouchstart' in document.documentElement
回答by Rick Byers
Not that you probably don't want to change behavior just because a browser 'supports touch'. Eg. Chrome on Windows now supports touch all the time, even though there won't necessarily be a touch screen attached. Even if there is a touch screen attached, the user doesn't necessarily use it, so you need to be careful with what you change.
并不是说您可能不想仅仅因为浏览器“支持触摸”而改变行为。例如。Windows 上的 Chrome 现在一直支持触摸，即使不一定要连接触摸屏。即使附加了触摸屏，用户也不一定会使用它，因此您需要注意更改内容。
So this really comes down to why you want to know:
所以这真的归结为你想知道的原因：
You want to know whether you're going to get touchstart/touchmove/touchend events: There's really no way to know this in advance for sure. Eg. the user could plug in a touch screen after your page has loaded. If you might be interested in these events, you should just listen for them.
You want to know if you should display a 'mobile' version of your site Whether or not the user has touch support is not the right signal for this - eg. a Windows user with a touch screen probably does NOT want your mobile site. You can use UserAgent heurstics, but please give the user a sticky way to switch versions of your site.
You want to know if you should tweak your UI to be more friendly for touch input Eg., maybe some buttons should be larger if the user is likely to use touch. In general it may be best to always design for multiple pointer types - after all you have no way to know the user's pointer preference when they have both touch and mouse. But if you really want to use knowledge of the pointer hardware available as a hint to making the best UI tradeoff, then there are new CSS media queries you can use:
你想知道你是否会得到 touchstart/touchmove/touchend 事件：真的没有办法提前知道。例如。用户可以在您的页面加载后插入触摸屏。如果你可能对这些事件感兴趣，你应该只听它们。
您想知道是否应该显示您网站的“移动”版本用户是否支持触摸不是正确的信号 - 例如。使用触摸屏的 Windows 用户可能不想要您的移动网站。您可以使用 UserAgent heurstics，但请为用户提供一种切换站点版本的粘性方式。
您想知道是否应该调整您的 UI 以使其对触摸输入更加友好。例如，如果用户可能使用触摸，则某些按钮应该更大。一般来说，最好总是为多种指针类型进行设计——毕竟当用户同时拥有触摸和鼠标时，你无法知道用户的指针偏好。但是，如果您真的想使用可用的指针硬件知识作为进行最佳 UI 权衡的提示，那么您可以使用新的 CSS 媒体查询：
I added partial support to Chrome for these in Chrome 21 (crbug.com/123062). As far as I know, no other browser supports them yet.
我在 Chrome 21 (crbug.com/123062) 中添加了对 Chrome 的部分支持。据我所知，目前还没有其他浏览器支持它们。
回答by lafeber
('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch
