更新:在将整个功能检测库拉入你的项目之前，请阅读下面blmstr的回答。检测实际的触摸支持更加复杂，Modernizr只涵盖了一个基本的用例。

Modernizr是一种很棒的轻量级方法，可以在任何网站上进行各种特征检测。

它只是为每个特性在html元素中添加类。

然后你可以在CSS和JS中轻松地瞄准这些功能。例如:

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

和Javascript (jQuery示例):

$('html.touch #popup').hide();

由于Modernizr无法检测Windows Phone 8/WinRT上的IE10，一个简单的跨浏览器解决方案是:

var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

你只需要检查一次，因为设备不会突然支持或不支持触摸，所以只需将它存储在一个变量中，这样你就可以更有效地多次使用它。

var isTouchScreen = 'createTouch' in document;

or

var isTouchScreen = 'createTouch' in document || screen.width <= 699 || 
    ua.match(/(iPhone|iPod|iPad)/) || ua.match(/BlackBerry/) || 
    ua.match(/Android/);

我想会进行更彻底的检查。

jQuery扩展支持对象:

jQuery.support.touch = 'ontouchend' in document;

现在你可以在任何地方检查它，像这样:

if( jQuery.support.touch )
   // do touch stuff

jQuery v1.11.3

答案中有很多有用的信息。但是，最近我花了很多时间试图将所有事情结合到一个有效的解决方案中，以完成两件事:

检测正在使用的设备是触摸屏类型的设备。 检测设备被窃听。

除了这篇文章和用Javascript检测触摸屏设备，我发现Patrick Lauke的这篇文章非常有用:https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/

这是代码…

$(document).ready(function() {
//The page is "ready" and the document can be manipulated.

    if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0))
    {
      //If the device is a touch capable device, then...
      $(document).on("touchstart", "a", function() {

        //Do something on tap.

      });
    }
    else
    {
      null;
    }
});

重要!*。On (events [， selector] [， data]， handler)方法需要有一个选择器，通常是一个元素，它可以处理“touchstart”事件，或任何其他与触摸相关的类似事件。在本例中，它是超链接元素“a”。

现在，你不需要在JavaScript中处理常规的鼠标点击，因为你可以使用CSS来处理这些事件，使用超链接“a”元素的选择器，如下所示:

/* unvisited link */
a:link 
{

}

/* visited link */
a:visited 
{

}

/* mouse over link */
a:hover 
{

}

/* selected link */
a:active 
{

}

注意:还有其他的选择器…

这个问题

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

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

解决方案

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