如何使用 JS/jQuery 检查浏览器是否支持 touchstart？答案

【问题标题】：How to check browser for touchstart support using JS/jQuery?如何使用 JS/jQuery 检查浏览器是否支持 touchstart？
【发布时间】：2011-02-24 08:12:36
【问题描述】：

为了遵循最佳实践，我们尝试根据您使用的设备使用正确的 JavaScript/jQuery 事件。例如，我们正在构建一个移动网站，该网站的标签具有点击或触摸事件。对于 iPhone，我们想使用“touchstart”事件。在我们将处理程序绑定到对象之前，我们想测试他们的设备是否支持“touchstart”。如果没有，那么我们将改为绑定“onclick”。

最好的方法是什么？

【问题讨论】：

标签： javascript jquery iphone mobile unobtrusive-javascript

【解决方案1】：

您可以检测事件是否支持：

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

看看这篇文章：

Detecting event support without browser sniffing

那里发布的isEventSupported函数，非常擅长检测各种各样的事件，而且它是跨浏览器的。

【讨论】：

我有点想为此 +1，但我知道 Firefox 会因为错误的原因在此处返回 false。 Firefox 对以这种方式检查的所有事件返回 false（我知道，这是 Fx 很糟糕的罕见情况之一）。这篇文章确实涉及到了这一点，所以你会得到你的 +1 ;-)
很好的资源。感谢您的快速帮助！
这仅检测浏览器是否支持触摸事件，它不确定设备是否支持它们。在非触摸设备上的 Chrome 中尝试此操作。
这个和document.documentElement.hasOwnProperty('ontouchstart')一样吗？
@RobG 我在 Chrome 35.0.1916.153 m 上在一台非触摸笔记本电脑上运行它，得到了false，正如预期的那样。我错过了什么吗？

【解决方案2】：

使用此代码检测设备是否支持触摸。

也适用于使用“MSPointerDown”事件而不是“touchmove”的 Windows 8 IE10

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;
    }

}

【讨论】：

为什么不把它简化为单行呢？ var supportsTouch = ('ontouchstart' in window || window.navigator.msPointerEnabled)
不幸的是，这对我来说不适用于惠普笔记本电脑（无触摸屏）上的 Windows 10 上的 ie 11。它错误地说supportsTouch = true。但是当我将某些东西绑定到“touchstart”时，它永远不会被执行。有什么办法吗？
这是错误的。 Pointers API 不仅适用于触控设备。它适用于几乎所有输入设备。
修改答案以检查 msMaxTouchPoints（触摸支持测试）

【解决方案3】：

您可以检查 typeof document.body.ontouchstart == "undefined" 是否会退回到正常的 dom 事件

【讨论】：

【解决方案4】：

我做了一个完整的演示，可以在每个浏览器中使用这个问题的解决方案的完整源代码：Detect touch screen devices in Javascript。

【讨论】：

您的示例产生了很多误报。有很多浏览器默认实现了 Touch API，无论系统是否实际连接了触摸设备。
@Nilpo 也许你是对的。这篇文章是七年前写的。