用Javascript检测触摸屏设备
在Javascript / jQuery中，如何检测客户端设备是否有鼠标？
当用户将鼠标hover在某个项目上时，我有一个网站可以滑动一些信息面板。 我正在使用jQuery.hoverIntent检测hover，但这显然不适用于iPhone / iPad / Android等触摸屏设备。 所以在这些设备上，我想恢复点击以显示信息面板。
+1进行hover并click两者。 另一种方式可能是使用CSS媒体查询，并只使用一些风格的小屏幕/移动设备，这是最有可能触摸/点击function。 因此，如果您通过CSS获得了一些特定的样式，那么您可以通过jQuery检查这些元素以获取移动设备样式属性，您可以将其绑定到这些元素中，以便为您编写移动特定的代码
看到这里： http : //www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/
var isTouchDevice = 'ontouchstart' in document.documentElement;
注意 ：仅仅因为设备支持触摸事件并不一定意味着它只是一个触摸屏设备。 即使没有任何实际的触摸input机制，许多设备（例如我的Asus Zenbook）也支持点击和触摸事件。 在devise触摸支持时，总是包含点击事件支持，绝不要假设任何设备都是独一无二的。
发现window.Touchtesting不工作在Android上，但是这样做：
function is_touch_device() { return !!('ontouchstart' in window); }
查看文章： 使用JavaScript检测“触摸屏”设备的最佳方法是什么？
if ("ontouchstart" in window || navigator.msMaxTouchPoints) { isTouch = true; } else { isTouch = false; }
作品每一个地方！
return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
与msMaxTouchPoints一起使用maxTouchPoints的原因：
微软已经表示，从Internet Explorer 11开始，Microsoft供应商可以删除此属性的前缀版本（msMaxTouchPoints），并build议使用maxTouchPoints。
来源： http : //ctrlq.org/code/19616-detect-touch-screen-javascript
我用：
if(jQuery.support.touch){ alert('Touch enabled'); }
在jQuery手机1.0.1
谷歌浏览器似乎在这个返回误报：
var isTouch = 'ontouchstart' in document.documentElement;
我想这与它能够“模拟触摸事件”（F12 – >右下angular的设置 – >“覆盖”标签 – >最后一个checkbox）有关。 我知道它默认情况下是closures的，但这就是我将结果中的变化（在Chrome中使用的“in”方法）连接起来的原因。 不过，就我所testing的情况来看，这似乎是有效的：
var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);
所有浏览器我运行代码的状态typeof是“对象”，但我觉得更确定知道这是什么，但未定义:-)
testingIE7，IE8，IE9，IE10，Chrome 23.0.1271.64，Chrome for iPad 21.0.1180.80和iPad Safari。 如果有人做了更多的testing并分享结果，这将是很酷的。
写了这个为我的网站之一，可能是最简单的解决scheme。 特别是即使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"; }
我已经testing了以上在讨论中提到的代码
function is_touch_device() { return !!('ontouchstart' in window); }
作品在Android Mozilla，铬，歌剧，Android默认浏览器和iPhone上的Safari …所有积极的…
似乎对我坚实:)
关于这个主题的一篇有用的博客文章，从Modernizr源码中链接到检测触摸事件。 结论：从Javascript无法可靠地检测到触摸屏设备。
这适用于我：
function isTouchDevice(){ return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch); }
在jQuery Mobile中，你可以简单地做：
$.support.touch
不知道为什么这是如此无证…但是它是安全的crossbrowser（当前浏览器的最新的2个版本）。
对于我的第一篇文章/评论：我们都知道'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
祝你今天愉快！
对于iPad开发，我正在使用：
if (window.Touch) { alert("touchy touchy"); } else { alert("no touchy touchy"); }
然后，我可以select性地绑定到基于触摸的事件（例如ontouchstart）或基于鼠标的事件（例如onmousedown）。 我还没有在android上testing过。
如果您使用Modernizr ，那么使用前面提到的Modernizr.touch非常容易。
不过，我更喜欢使用Modernizr.touch和用户代理testing的组合，只是为了安全起见。
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，你可以简单地用('ontouchstart' in document.documentElement)replace上面的Modernizr.touch函数，
另请注意，testing用户代理iemobile将为您提供比Windows Phone更广泛的检测到的Microsoft移动设备。
也看到这个问题
