使用Javascript检测触摸屏设备

Question

使用Javascript检测触摸屏设备

131

在JavaScript/jQuery中，如何检测客户端设备是否有鼠标？

我有一个网站，在用户将鼠标悬停在某个项目上时会弹出一些信息面板。我正在使用jQuery.hoverIntent来检测悬停事件，但是这显然不适用于像iPhone/iPad/Android这样的触摸屏设备。因此，在这些设备上，我想改为使用轻触来显示信息面板。

- Brad Robinson

6

为什么不能两者兼顾？在非触摸屏设备中，触控板功能不可取吗？ - EMPraptor

1

由于一些新设备不支持:hover，因此在为多个设备编写一个样式表时，最好仅将:hover用于纯粹的美观目的。 - drudge

@empraptor：说得好 - 是的，我可以这样做。但是...我们也考虑在触摸屏设备上始终显示面板 - 在这种情况下，我需要能够检测支持。 - Brad Robinson

如果您可以在触摸屏设备上始终显示面板，那么您也可以在其他设备上显示它吗？面板有多大，为什么只在悬停/轻敲时显示它是可取的？ - EMPraptor

可能是重复的问题：什么是使用 JavaScript 检测“触摸屏”设备的最佳方法？ - Andrew Whitaker

16个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike S · Answer 1

这篇有用的博客文章是从Modernizr检测触摸事件的源代码中链接过来的。结论是：不可能通过Javascript可靠地检测到触摸屏设备。

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

- Turtletrail · Answer 2

2

这对我有效：

注意：保留了HTML标签。

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

- Turtletrail

1

你测试过多少个平台、浏览器、操作系统和设备？ - BerggreenDK

1

FF，Chrome，Safari在Android和iOS（iPad）上。 - Turtletrail

1

还不错。我刚在桌面上测试了一下，得到了很多"undefined"，这让IF结构有点糟糕。如果你稍微调整一下返回值，像这样：return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);那么你就可以得到true或false了 :-) - BerggreenDK

2

在Chrome中，“window”中的“ontouchstart”在我的没有触摸屏的PC上为真，因此这不起作用。正如早些时候所提到的，这测试浏览器是否具有触摸功能。另外，“true ==”没有任何作用，应该省略。 - rakensi

1

当我在Chrome中使用内置模拟器尝试此操作时，它会在模拟器中打开触摸时检测到触摸，关闭触摸时不会检测到触摸。所以对我来说很好用。但是：我使用Prasad的简短版本（如下），它不使用Turtletrail代码中的||。并且：我不在乎它是否适用于100％的设备。99％对我来说足够了。 - Ralf

为什么要将布尔值与 true 进行比较？õ.O 只需返回布尔值或 !!bool 以确保它返回布尔值。 - jpenna

- OZZIE · Answer 3

在jQuery Mobile中，您可以简单地执行以下操作：

$.support.touch

不知道为什么这个东西文档那么少，但是它在跨浏览器方面是安全的（支持当前浏览器的最新2个版本）。

- j7m · Answer 4

如果您使用Modernizr，那么像之前提到的那样使用Modernizr.touch非常容易。

然而，为了保险起见，我更喜欢同时使用Modernizr.touch和用户代理测试。

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.touch函数替换为('ontouchstart' in document.documentElement) 此外，请注意，测试用户代理 iemobile 将为您提供比 Windows Phone 更广泛的检测到的Microsoft移动设备范围。此外还可以参考这个SO问题

- user3792852 · Answer 5

如前所述，设备可能支持鼠标和触摸输入。很多时候，问题不是“支持什么”，而是“当前正在使用什么”。

对于这种情况，您可以简单地注册鼠标事件（包括悬停监听器）和触摸事件。

element.addEventListener('touchstart',onTouchStartCallback,false);

element.addEventListener('onmousedown',onMouseDownCallback,false);

...

JavaScript 应该根据用户输入自动调用正确的监听器。因此，在触摸事件的情况下，将触发 onTouchStartCallback，模拟您的悬停代码。

请注意，触摸可能会触发两种类型的监听器，即触摸和鼠标。但是，触摸监听器首先执行，并且可以通过调用 event.preventDefault() 防止后续的鼠标监听器触发。

function onTouchStartCallback(ev) {
    // Call preventDefault() to prevent any further handling
    ev.preventDefault();
    your code...
}

更多阅读请点击这里。

- Halton · Answer 6

我在iPad开发中使用：

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

我可以有选择地绑定触摸事件（例如ontouchstart）或鼠标事件（例如onmousedown）。我还没有在Android上进行测试。