用Javascript检测触摸屏设备

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

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

+1进行hoverclick两者。 另一种方式可能是使用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无法可靠地检测到触摸屏设备。

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

这适用于我:

 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移动设备。

也看到这个问题