Question

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

当用户将鼠标悬停在某个项目上时，我有一个可以向上滑动一个小信息面板的网站。我正在使用jQuery.hoverIntent来检测悬停，但这显然不适用于iPhone / iPad / Android等触摸屏设备。所以在那些设备上，我想恢复点击以显示信息面板。

Answer 1

var isTouchDevice = 'ontouchstart' in document.documentElement;

注意：仅仅因为设备支持触摸事件并不一定意味着它只是一个触摸屏设备。许多设备（例如我的华硕Zenbook）都支持点击和触摸事件，即使它们没有任何实际的触摸输入机制。在设计触摸支持时，始终包括点击事件支持，并且永远不要假设任何设备只是一个或另一个。

Answer 2

找到了window.Touch的测试在android上没有用但是这样做：

function is_touch_device() {
  return !!('ontouchstart' in window);
}

参见文章：What's the best way to detect a 'touch screen' device using JavaScript?

Answer 3

+1，用于执行hover和click两者。另一种方式可能是使用CSS媒体查询，并仅将一些样式用于较小的屏幕/移动设备，这些设备最有可能具有触摸/点击功能。因此，如果您通过CSS获得某些特定样式，并且从jQuery中检查这些元素，您可以将这些元素用于移动设备样式属性，以便为您编写移动特定代码。

见这里：http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

Answer 4

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

使用maxTouchPoints和msMaxTouchPoints的原因：

微软表示从Internet Explorer 11开始， Microsoft供应商前缀此属性的版本（msMaxTouchPoints）可以删除并建议使用maxTouchPoints。

来源：http://ctrlq.org/code/19616-detect-touch-screen-javascript

Answer 5

if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

适用于每个地方！

Answer 6

我用：

if(jQuery.support.touch){
    alert('Touch enabled');
}

在jQuery mobile 1.0.1中

Answer 7

谷歌浏览器似乎在这个问题上返回误报：

var isTouch = 'ontouchstart' in document.documentElement;

我认为它与“模拟触摸事件”的能力有关（F12 - ＆gt;右下角的设置 - ＆gt;“覆盖”标签 - ＆gt;最后一个复选框）。我知道它默认关闭了，但这就是我将结果的变化与（用于在Chrome中工作的“in”方法）联系起来的。但是，就我测试而言，这似乎有效：

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

我在 typeof 上运行该代码的所有浏览器都是“对象”但我更确定知道它是什么但未定义： - ）

在IE7，IE8，IE9，IE10，Chrome 23.0.1271.64，Chrome for iPad 21.0.1180.80和iPad Safari上测试。如果有人做了更多测试并分享了结果，那将会很酷。

Answer 8

为我的一个网站写了这个，可能是最简单的解决方案。特别是因为即使是Modernizr也会在触摸检测上出现误报。

如果你正在使用jQuery

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});

或只是纯粹的JS ......

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}

Answer 9

我的第一篇帖子/评论：我们都知道点击前会触发'touchstart'。我们还知道，当用户打开您的页面时，他或她将： 1）移动鼠标 2）点击 3）触摸屏幕（滚动，或...... :)）

让我们尝试一下：

// - ＆GT;开始：jQuery

var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

//＆lt; - 结束：jQuery

度过美好的一天！

Answer 10

我在讨论中测试了上面提到的以下代码

 function is_touch_device() {
    return !!('ontouchstart' in window);
 }

适用于Android Mozilla，Chrome，Opera，Android默认浏览器和iphone上的safari ... 所有积极的......

对我来说似乎很有用：）

Answer 11

关于该主题的有用博客文章，链接到Modernizr源中用于检测触摸事件。结论：无法从Javascript中可靠地检测触摸屏设备。

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

Answer 12

这对我有用：

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

Answer 13

在jQuery Mobile中你可以做到：

$.support.touch

不知道为什么这样没有文档...但它是crossbrowser safe（当前浏览器的最新2个版本）。

Answer 14

如果您使用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移动设备。

Also see this SO question

Answer 15

如上所述，设备可以支持鼠标和触摸输入。通常，问题不是“支持什么”，而是“当前使用的是什么”。

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

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...
}

进一步阅读here。

Answer 16

对于我正在使用的iPad开发：

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

然后，我可以选择性地绑定到基于触摸的事件（例如ontouchstart）或基于鼠标的事件（例如onmousedown）。我还没有在android上测试过。

使用Javascript检测触摸屏设备

16 个答案: