如何检测JavaScript中的设备触摸支持？

在过去，检测设备是否支持在JavaScript触摸事件的时候，我们可以做这样的事情：如何检测JavaScript中的设备触摸支持？

var touch_capable = ('ontouchstart' in document.documentElement);

然而，谷歌Chrome（17.x.x +）上述检查返回true，甚至如果底层设备不支持触摸事件。例如，运行在Windows 7上面的代码返回true，因此，如果我们喜欢的东西结合起来：

var start_evt = (touch_capable) ? 'ontouchstart' : 'onmousedown';

在谷歌Chrome，永远不会触发事件，因为我们结合ontouchstart。总之，有没有人知道一个可靠的方法来规避这一点？我目前运行下面的检查：

var touch_capable = ('ontouchstart' in document.documentElement && navigator.userAgent.toLowerCase().indexOf('chrome') == -1)

这是很不理想......

来源

2013-01-21 BenM

正确的答案是处理两种事件类型 - 它们不是相互排斥的。

对于支持触控更可靠的测试，还找window.DocumentTouch && document instanceof DocumentTouch这是一种用于Modernizr

更重要的是其中一个测试，只需使用Modernizr的自己，有它做特征检测为您服务。

请注意，虽然你不能防止误报，因此我的第一行以上 - 你得到支持两者。

来源

2013-01-21 13:38:56 Alnitak

正确 - 虽然我有（并且爱）平板电脑，但有时我有鼠标，我不害怕使用它。 –

谢谢。这实际上是一个jQuery插件，我宁愿不添加Modernizr的先决条件。然而，出于某种原因'window.DocumentTouch &&文档instanceof DocumentTouch'返回'undefined' ... – BenM

@BenM你知道可以构建一个Modernizr的自定义下载，它只包含你需要的测试吗？ – Alnitak

您应该考虑使用经过良好测试（和跨浏览器）Modernizr的触摸测试。

从他们的网站：

// bind to mouse events in any case 

if (Modernizr.touch){ 
    // bind to touchstart, touchmove, etc and watch `event.streamId` 
}

http://modernizr.github.com/Modernizr/touch.html

来源

2013-01-21 13:41:52 techfoobar

正确的观点，错误的答案。 Modernizr可以测试触摸支持的“误报”，因此您仍应始终支持鼠标事件。 – Alnitak

除此之外，强制用户使用他们的触摸屏（而不是他们所持的鼠标）并不好。 –

是的，如果设备支持，应该始终包含鼠标支持并包含触摸支持。需要纠正我的答案。 – techfoobar

好老问题，但不得不这样做没有图书馆，我创建了以下的解决方案 - 只是让事件谈了他们的自我 - 当您看到touch事件时，只需禁用处理mouse事件。

在coffescript中是这样的;

  hasTouch = false 
      mouseIsDown = false 
      @divs.on "touchstart", (e)-> 
       hasTouch = true 
       touchstart(e.timeStamp,e.originalEvent.touches[0].pageX); 
       return true 
      @divs.on "mousedown", (e)-> 
       mouseIsDown = true; 
       touchstart(e.timeStamp,e.clientX) if not hasTouch 
       return true 

      @divs.on 'touchmove', (e) -> 
       touchmove(e.timeStamp,e.originalEvent.touches[0].pageX); 
       return true; 
      @divs.on 'mousemove', (e) -> 
       touchmove(e.timeStamp,e.clientX) if mouseIsDown and not hasTouch 
       return true; 

      @divs.on 'touchend', (e) -> 
       touchend(); 
       return true 
      @divs.on 'mouseup', (e) -> 
       mouseIsDown = false; 
       touchend() if not hasTouch 
       return true

刚刚定义功能touchstart，move和end包含实际逻辑....

来源

2015-09-26 16:09:21 Soren

这是Modernizr的如何执行触摸检测，以增加支撑的变形与IE10 +触摸设备一起使用。

var isTouchCapable = 'ontouchstart' in window || 
window.DocumentTouch && document instanceof window.DocumentTouch || 
navigator.maxTouchPoints > 0 || 
window.navigator.msMaxTouchPoints > 0;

这不是因为detecting a touch device is apparently an impossibility万无一失。

大小可能不同：

旧版触摸屏设备只有模拟鼠标事件
有些浏览器& OS设置当没有触摸屏连接
在混合鼠标器/触摸式/触控板可以使得触摸的API /笔/键盘环境，这并不表示哪个输入是使用，只有浏览器是敏感 - 它只检测浏览器是否可以接受或模拟触摸输入。例如，用户可以随时使用鼠标切换触摸笔记本电脑或鼠标连接的平板电脑上的屏幕。

更新： 一个小窍门：不要使用触摸功能检测，以控制&指定UI行为，use event listeners instead。针对click/touch/keyup事件而非设备的设计，触摸功能检测通常用于节省添加事件侦听器的CPU /内存开销。触摸检测的一个例子可能是有用的和适当的：

if (isTouchCapable) { 
    document.addEventListener('touchstart', myTouchFunction, false); 
}

来源

2015-12-08 01:05:46 Benson

为我工作，谢谢！ –

不客气！ – Benson

如何检测JavaScript中的设备触摸支持？

回答

相关问题