我们尝试了modernizr实现，但检测触摸事件不再一致(IE 10有触摸事件在windows桌面，IE 11工作，因为已经放弃触摸事件和添加指针api)。

所以我们决定优化网站作为一个触摸网站，只要我们不知道用户有什么输入类型。这比任何其他解决方案都更可靠。

我们的研究表明，大多数桌面用户在点击之前会将鼠标移到屏幕上，所以我们可以检测到他们，并在他们能够点击或悬停任何东西之前改变他们的行为。

这是我们代码的简化版本:

var isTouch = true;
window.addEventListener('mousemove', function mouseMoveDetector() {
    isTouch = false;
    window.removeEventListener('mousemove', mouseMoveDetector);
});

到目前为止，这似乎对我来说很有效:

//Checks if a touch screen
is_touch_screen = 'ontouchstart' in document.documentElement;

if (is_touch_screen) {
  // Do something if a touch screen
}
else {
  // Not a touch screen (i.e. desktop)
}

当连接鼠标时，可以假设有相当高的点击率(我想说几乎100%)，用户在页面准备好后移动鼠标至少一小段距离-没有任何点击。下面的机制检测到这一点。如果检测到，我认为这是缺少触摸支持的标志，或者，如果支持，在使用鼠标时不太重要。如果未检测到触摸设备，则假定为触摸设备。

这种方法可能不适合所有目的。它可以用来控制基于加载页面上的用户交互激活的功能，例如图像查看器。下面的代码还将把mouemove事件绑定在没有鼠标的设备上，因为它现在很突出。其他方法可能更好。

大致是这样的(对jQuery来说很抱歉，但在纯Javascript中类似):

var mousedown, first, second = false;
var ticks = 10;
$(document).on('mousemove', (function(e) {
    if(UI.mousechecked) return;
    if(!first) {
        first = e.pageX;
        return;
        }
    if(!second && ticks-- === 0) {
        second = e.pageX;
        $(document).off('mousemove'); // or bind it to somewhat else
        }
    if(first  && second  && first !== second && !mousedown){
        // set whatever flags you want
        UI.hasmouse = true;
        UI.touch = false;
        UI.mousechecked = true;
    }

    return;
}));
$(document).one('mousedown', (function(e) {
    mousedown = true;
    return;
}));
$(document).one('mouseup', (function(e) {
    mousedown = false;
    return;
}));

看起来Chrome 24现在支持触摸事件了，可能是Windows 8。所以这里发布的代码不再有效。而不是试图检测触摸是否支持浏览器，我现在绑定触摸和点击事件，并确保只有一个被调用:

myCustomBind = function(controlName, callback) {

  $(controlName).bind('touchend click', function(e) {
    e.stopPropagation();
    e.preventDefault();

    callback.call();
  });
};

然后调用它:

myCustomBind('#mnuRealtime', function () { ... });

希望这能有所帮助!

如果您使用Modernizr，使用Modernizr是非常容易的。如前所述，触摸。

但是，我更喜欢使用Modernizr的组合。触摸和用户代理测试，只是为了安全。

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

如果不使用Modernizr，可以简单地替换Modernizr。在document.documentElement中使用('ontouchstart')

还要注意，测试用户代理iemobile将为您提供比Windows Phone更广泛的检测到的微软移动设备。

也可以看到这个SO问题

这个问题

由于混合设备使用触摸和鼠标输入的组合，你需要能够动态地改变状态/变量，控制一段代码是否应该运行，如果用户是触摸用户或不是。

触控设备也可以在点击时触发鼠标移动。

解决方案

Assume touch is false on load. Wait until a touchstart event is fired, then set it to true. If touchstart was fired, add a mousemove handler. If the time between two mousemove events firing was less than 20ms, assume they are using a mouse as input. Remove the event as it's no longer needed and mousemove is an expensive event for mouse devices. As soon as touchstart is fired again (user went back to using touch), the variable is set back to true. And repeat the process so it's determined in a dynamic fashion. If by some miracle mousemove gets fired twice on touch absurdly quickly (in my testing it's virtually impossible to do it within 20ms), the next touchstart will set it back to true.

在Safari iOS和Chrome for Android上进行了测试。

注意:不是100%确定的指针事件为MS Surface等。

Codepen演示

const supportsTouch = 'ontouchstart' in window;
let isUsingTouch = false;

// `touchstart`, `pointerdown`
const touchHandler = () => {
  isUsingTouch = true;
  document.addEventListener('mousemove', mousemoveHandler);
};

// use a simple closure to store previous time as internal state
const mousemoveHandler = (() => {
  let time;
  
  return () => {
    const now = performance.now();

    if (now - time < 20) {
      isUsingTouch = false;
      document.removeEventListener('mousemove', mousemoveHandler);
    }

    time = now;
  }
})();

// add listeners
if (supportsTouch) {
  document.addEventListener('touchstart', touchHandler);
} else if (navigator.maxTouchPoints || navigator.msMaxTouchPoints) {
  document.addEventListener('pointerdown', touchHandler);
}