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

Question

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

这样做的最佳方式是什么？

Answer 1

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

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

看一下这篇文章：

• Detecting event support without browser sniffing

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

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

}

Answer 3

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

Answer 4

我做了一个完整的演示，适用于每个浏览器，并提供此问题解决方案的完整源代码：Detect touch screen devices in Javascript。