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 
{

}

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

如果你测试document.documentElement中支持touchstart，这就很简单了

var x = 'touchstart'在document.documentElement; console.log (x) //如果支持返回true //否则返回false

事实上，我研究了这个问题并考虑了各种情况。因为这在我的项目中也是一个大问题。所以我达到了下面的功能，它适用于所有设备上所有浏览器的所有版本:

const isTouchDevice = () => {
  const prefixes = ['', '-webkit-', '-moz-', '-o-', '-ms-', ''];
  const mq = query => window.matchMedia(query).matches;

  if (
    'ontouchstart' in window ||
    (window.DocumentTouch && document instanceof DocumentTouch)
  ) {
    return true;
  }
  return mq(['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join(''));
};

提示:显然，isTouchDevice只返回布尔值。

试图检测触控的最大“陷阱”是同时支持触控和触控板/鼠标的混合设备。即使你能够正确地检测用户的设备是否支持触摸，你真正需要做的是检测用户当前使用的输入设备。这里有一份关于这个挑战的详细报告和可能的解决方案。

基本上，判断用户是触摸屏幕还是使用鼠标/触控板的方法是在页面上注册touchstart和mouseover事件:

document.addEventListener('touchstart', functionref, false) // on user tap, "touchstart" fires first
document.addEventListener('mouseover', functionref, false) // followed by mouse event, ie: "mouseover"

触摸动作会触发这两个事件，尽管前者(touchstart)在大多数设备上总是先触发。因此，依靠这个可预测的事件序列，您可以创建一种机制，动态地向文档根添加或删除一个can-touch类，以反映当前用户在文档上的输入类型:

;(function(){
    var isTouch = false //var to indicate current input type (is touch versus no touch) 
    var isTouchTimer 
    var curRootClass = '' //var indicating current document root class ("can-touch" or "")
     
    function addtouchclass(e){
        clearTimeout(isTouchTimer)
        isTouch = true
        if (curRootClass != 'can-touch'){ //add "can-touch' class if it's not already present
            curRootClass = 'can-touch'
            document.documentElement.classList.add(curRootClass)
        }
        isTouchTimer = setTimeout(function(){isTouch = false}, 500) //maintain "istouch" state for 500ms so removetouchclass doesn't get fired immediately following a touch event
    }
     
    function removetouchclass(e){
        if (!isTouch && curRootClass == 'can-touch'){ //remove 'can-touch' class if not triggered by a touch event and class is present
            isTouch = false
            curRootClass = ''
            document.documentElement.classList.remove('can-touch')
        }
    }
     
    document.addEventListener('touchstart', addtouchclass, false) //this event only gets called when input type is touch
    document.addEventListener('mouseover', removetouchclass, false) //this event gets called when input type is everything from touch to mouse/ trackpad
})();

详情请点击这里。

所以关于检测触摸/非触摸设备存在很大的争议。窗口平板电脑的数量和尺寸都在增加，这给我们网页开发者带来了另一个难题。

我已经使用并测试了blmstr的菜单答案。菜单的工作方式是这样的:当页面加载时，脚本检测这是一个触摸或非触摸设备。基于此，菜单将在悬停(非触摸)或点击/点击(触摸)时工作。

在大多数情况下，blmstr的脚本似乎工作得很好(特别是2018年的那个)。但仍然有一种设备，当它不是触摸时，它会被检测为触摸，反之亦然。

出于这个原因，我做了一些挖掘，多亏了这篇文章，我从blmstr的第4个脚本中替换了几行:

函数is_touch_device4() { If ("ontouchstart" in window) 返回true; 如果窗口。DocumentTouch的文档实例) 返回true; 返回窗口。matchMedia("(指针:粗)").matches; ｝ alert('Is touch device: '+is_touch_device4()); console.log('Is touch device: '+is_touch_device4());

由于封锁，有有限的触摸设备来测试这一个，但到目前为止，上面的工作很好。

如果任何人有桌面触摸设备(如平板电脑)可以确认脚本是否工作正常，我将不胜感激。

现在在支持指针方面:粗媒体查询似乎是支持的。我保留了上面的行，因为我在移动firefox上(出于某种原因)出现了问题，但媒体查询上面的行是有效的。

谢谢

更新2021

要查看以前的答案，请查看历史记录。我决定从头开始，因为在保存历史的时候，它变得难以控制。

我最初的回答是，使用与Modernizr使用的相同功能可能是一个好主意，但这不再有效，因为他们删除了这个PR: https://github.com/Modernizr/Modernizr/pull/2432上的“touchevents”测试，因为这是一个令人困惑的主题。

话虽如此，这应该是一个相当好的检测浏览器是否具有“触摸功能”的方法:

function isTouchDevice() {
  return (('ontouchstart' in window) ||
     (navigator.maxTouchPoints > 0) ||
     (navigator.msMaxTouchPoints > 0));
}

但是对于比我更聪明的人写过的更高级的用例，我建议阅读这些文章:

斯图·考克斯:你无法检测触摸屏 触摸检测:它是“为什么”，而不是“如何” Patrick H. Lauke的敏感演讲