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

Question

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

最好的方法是什么？

Answer 1

您可以通过以下方式检测事件是否受支持：

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

查看本文：

• 检测无需浏览器嗅探的事件支持

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

Answer 2

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

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

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

}

Answer 3

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

Answer 4

我做了一个完整的演示，适用于每个浏览器，并提供了该问题解决方案的完整源代码：在 Javascript 中检测触摸屏设备。