Javascript 如何在浏览器上检查真正的触摸支持

今天（或最近）我的Chrome Beta版升级到17版，我注意到我的web应用程序中有一些有趣的东西。我注意到这是因为一个类被添加到body元素中，通常只有在有触摸事件支持的情况下才会放在那里，我检查如下：

  try {  
    document.createEvent("TouchEvent");
    _device.touch = true;
  } catch (e) {
    _device.touch = false;
  }

果然，我可以在Chrome 17上创建并触发触摸事件。我的第一个想法是，哦，我可以检查触摸，看看鼠标点击是否失败，因此，有一个鼠标，但鼠标事件也会触发

在没有用户代理嗅探的情况下，我如何检查它是否是一个实际的、可触摸的设备，而不仅仅是一个支持触摸事件的浏览器。

试试：

'ontouchstart' in document.documentElement

---

并不是说你可能不想仅仅因为浏览器“支持触摸”就改变行为。Windows上的Chrome现在一直支持触摸屏，即使不一定要安装触摸屏。即使连接了触摸屏，用户也不一定要使用它，因此您需要小心更改内容

这就是你想知道的原因：

您想知道是否要获取touchstart/touchmove/touchend事件： 真的没有办法事先确定这一点。用户可以在页面加载后插入触摸屏。如果你可能对这些事件感兴趣，你应该倾听它们

您想知道是否应该显示站点的“移动”版本 无论用户是否支持触摸屏，这都不是正确的信号——例如，使用触摸屏的Windows用户可能不想要您的移动站点。您可以使用UserAgent启发式，但请为用户提供切换站点版本的粘性方法

你想知道你是否应该调整你的用户界面，使之对触摸输入更加友好 例如，如果用户可能使用触摸屏，可能一些按钮应该更大。一般来说，最好总是设计多个指针类型——毕竟，当用户同时具有触摸和鼠标时，您无法知道用户的指针偏好。但是，如果您真的想使用指针硬件的知识作为做出最佳UI权衡的提示，那么您可以使用以下新的CSS媒体查询：

---

我在Chrome21（crbug.com/123062）中添加了对Chrome的部分支持。据我所知，还没有其他浏览器支持触摸屏。

如果浏览器支持触摸屏，如果计算机不支持触摸屏，又有什么关系？只需启用触摸和鼠标事件，并让用户选择。这可能会帮助您：@mblase75正是我要找的。Obv。触摸设备将变得越来越流行。不幸的是，检查触摸现在是倒退的，因为台式机/笔记本电脑支持它。试着用鼠标来代替，但是用模拟事件来检查是很困难的。我解决了这个问题，请看。@marknadal自一年前我发布此消息以来，下面的公认答案一直在Yammer.com上工作：）效果很好：）在Chrome 17、FF9、Safari 5、IE7上检查过-9@MarcelJackwerth：当我回到Windows时，让我检查一下，但在Chrome 19上，它似乎运行良好，至少在Android（姜饼）上失败了-在触摸屏手机上，这显然继续返回false。@dragon:请尝试以下测试之一，然后：@user983693:在哪个浏览器上？

ontouchstart

事件真的有效吗？即使这样也很脆弱。Chrome 25报告说，我在戴尔17英寸笔记本电脑上安装了指针：航向和悬停：0。是的，这台笔记本电脑支持触摸屏，但它是关机的，我用的是鼠标。这是个问题。（注意，这已经开始影响到我的真实网络应用：）大家都同意，区分移动和触摸是很好的。Windows和10上的触摸屏“平板电脑不需要触摸屏网站。然而，许多开发人员通过将onclick事件替换为ontouchstart等来优化touch，以避免等待双击。在这种情况下，指针检测会更有效，因为这会妨碍设备使用触摸和指针。奥托：媒体查询过去是这样定义的（根据所有指针设备中“能力最低的”）。根据反馈，我们已经更新了media queries规范，现在将在触摸屏笔记本电脑中返回指针：精细，悬停：1（但指针：粗糙将返回真）。看见我们希望在Chrome 38中实现这一点：

（窗口中的“ontouchstart”）window.DocumentTouch和window.document实例DocumentTouch | window.navigator.maxTouchPoints | window.navigator.msMaxTouchPoints？正确：错误

请注意，FF团队多次启用和禁用触摸支持，最后决定在即将发布的52版本中永久启用触摸支持。

('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch