用Javascript检测触摸屏设备

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

---

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

+1用于执行

悬停和
同时单击。另一种方法是使用CSS媒体查询，并仅对较小的屏幕/移动设备使用某些样式，这些设备最有可能具有触摸/点击功能。因此，如果您通过CSS拥有一些特定的样式，并从jQuery中检查这些元素的移动设备样式属性，您可以将它们连接到其中，以编写特定于移动设备的代码

请参见此处：
对于我正在使用的iPad开发：

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

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

var isTouchDevice = 'ontouchstart' in document.documentElement;

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

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

在jQuery mobile 1.0.1
中找到了Windows的测试。Touch在android上不起作用，但它可以：

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

请参阅文章：
这对我很有用：

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

Google Chrome似乎在这一点上返回了误报：

var isTouch = 'ontouchstart' in document.documentElement;

我想这与它“模拟触摸事件”（F12->右下角的设置->“覆盖”选项卡->最后一个复选框）的能力有关。我知道默认情况下它是关闭的，但这就是我将结果中的更改与之联系起来的（在Chrome中使用的“in”方法）。
然而，据我测试，这似乎是可行的：

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

我运行过的所有浏览器上的代码的类型都是“object”，但我更确定的是，知道它是除未定义之外的任何东西：-）

在IE7、IE8、IE9、IE10、Chrome 23.0.1271.64、Chrome 21.0.1180.80和iPad Safari上进行测试。如果有人做了更多的测试并分享结果，那就太酷了。
为我的一个网站写了这篇文章，可能是最简单的解决方案。尤其是因为即使是Modernizer也可能在触摸检测时出现误报

如果使用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";
}

如前所述，如果您使用，则很容易使用
modernizer.touch

但是，为了安全起见，我更喜欢结合使用
modernizer.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
    }

如果不使用Modernizer，只需将上面的
Modernizer.touch
功能替换为
（“document.documentElement”中的“ontouchstart”）

还请注意，测试用户代理
iemobile
将为您提供比
Windows Phone
更大范围的检测到的Microsoft移动设备


到处工作
 我已经测试了上述讨论中提到的以下代码

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

适用于android Mozilla、chrome、Opera、android默认浏览器和iphone上的safari。。。
都是肯定的

对我来说似乎很可靠：）
这是一篇关于这个主题的有用的博客文章，链接到Modernizer源代码中，用于检测触摸事件。结论：不可能从Javascript可靠地检测触摸屏设备


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

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

来源：
在jQuery Mobile中，您只需执行以下操作：

$.support.touch

我不知道为什么这是没有文件的。。但它是跨浏览器安全的（当前浏览器的最新两个版本）
 关于我的第一篇帖子/评论：
我们都知道“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';
});

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

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

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

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

...

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

请注意，触摸可能会触发两种侦听器，触摸和鼠标。但是，touch侦听器会先启动，并通过调用
event.preventDefault（）
来防止后续鼠标侦听器触发

进一步阅读。
为什么你不能两者都做？在非触摸屏设备中，点击功能不受欢迎吗？因为一些较新的设备不支持
：hover
，所以（在为多个设备编写一个样式表时）使用
：hover
可能会更好，纯粹是为了装饰目的。@empraptor:好的一点-是的，我可以这样做。然而。。。我们还考虑在触摸屏设备上始终显示面板-在这种情况下，我需要能够检测到支持。如果您可以始终在触摸屏设备上显示面板，那么您不能在其他设备上也显示面板吗？面板有多大？为什么只在悬停/点击时才显示？可能的重复项不适用于Opera Mobile 10或Internet Explorer Mobile 6（Windows Mobile 6.5）。错误的交叉浏览器/跨操作系统/跨平台建议。如Modernizer文档中所述，这只检测浏览器功能，而不检测设备功能。。。你会被解雇的
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';
});

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

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

...

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