使用Javascript检测触摸屏设备

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

我有一个网站，当用户将鼠标悬停在某个项目上时，该网站会在信息面板上滑动。我正在使用jQuery.hoverIntent来检测悬停，但这显然不适用于iPhone / iPad / Android等触摸屏设备。因此，在这些设备上，我想还原为点按以显示信息面板。

+1做hover和click两者。另一种方法是使用CSS媒体查询，并且仅对较小的屏幕/移动设备使用某些样式，而较小的屏幕/移动设备最可能具有触摸/点击功能。因此，如果您通过CSS有一些特定的样式，并且从jQuery中检查了移动设备样式属性中的那些元素，则可以将它们挂钩以编写您的移动特定代码。

参见此处：http : //www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

var isTouchDevice = 'ontouchstart' in document.documentElement;

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

找到了针对window.Touch的测试，但在android上不起作用，但这可以做到：

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

请参阅文章：使用JavaScript检测“触摸屏”设备的最佳方法是什么？

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

将maxTouchPoints与msMaxTouchPoints一起使用的原因：

Microsoft已声明，从Internet Explorer 11开始，可能会删除此属性的Microsoft供应商前缀版本（msMaxTouchPoints），并建议改为使用maxTouchPoints。

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

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

在任何地方都可以使用！

我用：

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

在jQuery mobile 1.0.1中

谷歌浏览器似乎对此返回了误报：

var isTouch = 'ontouchstart' in document.documentElement;

我想它与“模拟触摸事件”的功能有关（F12->右下角的设置->“ Overrides”选项卡->最后一个复选框）。我知道默认情况下它是关闭的，这就是我将结果更改与之关联的原因（用于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上进行了测试。如果有人再做一些测试并共享结果，那将很酷。

在我的一个网站上写下了它，这可能是最简单的解决方案。尤其是因为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";
}

对于我的第一篇文章/评论：我们都知道在单击之前触发了“ touchstart”。我们也知道，当用户打开您的页面时，他或她将：1）移动鼠标2）单击3）触摸屏幕（用于滚动或... :)）

让我们尝试一下：

//->开始：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';
});

// <-结束：jQuery

祝你今天愉快！

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

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

适用于Android Mozilla，Chrome，Opera，Android默认浏览器和iPhone上的Safari。

对我来说似乎很可靠:)

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

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

这对我有用：

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

如果您使用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将为您提供更广泛的检测到的Microsoft移动设备Windows Phone。

另请参阅此问题

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

$.support.touch

不知道为什么这么没记载。.但是它是跨浏览器安全的（当前浏览器的最新2个版本）。

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

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

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

在这里进一步阅读。

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

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

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