谷歌chrome -我如何检测设备触摸支持在JavaScript

google chrome - How can I detect device touch support in JavaScript?

本文关键字：触摸 支持 JavaScript 检测设备 chrome 谷歌      更新时间：2023-09-26

在过去，当检测设备在JavaScript中是否支持触摸事件时，我们可以这样做:

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

然而，Google Chrome (17.x.x+)对于上述检查返回true，即使底层设备不支持触摸事件。例如，在Windows 7上运行上述代码返回true，因此，如果我们将其与以下内容组合:

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

在Google Chrome上，事件从未被触发，因为我们绑定到ontouchstart。简而言之，有人知道一种可靠的方法来规避这种情况吗?我目前正在执行以下检查:

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

正确的答案是同时处理两个事件类型——它们不是互斥的。

对于更可靠的触摸支持测试，还可以查看window.DocumentTouch && document instanceof DocumentTouch，这是Modernizr使用的测试之一

更好的是，你自己使用Modernizr，让它为你做特征检测。

请注意，您无法防止误报，因此我在上面的第一行-您已经使同时支持这两种情况。

这是Modernizr如何执行触摸检测的修改，增加了对IE10+触摸设备的支持。

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

这不是万无一失的，因为检测触摸设备显然是不可能的。

您的里程可能会有所不同:

  • 旧的触屏设备只模拟鼠标事件
  • 部分浏览器&操作系统设置可能在没有连接触摸屏的情况下启用触摸api，例如，在安装了触摸屏驱动程序的系统中，但触摸硬件不工作或未安装。
  • 在混合鼠标/触摸/触控板/笔/键盘环境中，这并不指示哪个输入正在使用，仅表示浏览器检测到触摸硬件存在。例如，用户可以随时从使用鼠标切换到触摸支持触摸的笔记本电脑或连接鼠标的平板电脑的屏幕。它只检测浏览器是否认为它可以接受或模拟触摸输入，例如，在Chrome Dev Tools中使用移动仿真模式时。

更新:提示:不要使用触摸能力检测来控制&指定UI行为，使用事件监听器代替。针对click/touch/keyup事件而不是设备的设计，触摸能力检测通常用于节省添加事件侦听器的cpu/内存开销。触摸检测可能有用和合适的一个例子:

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

…另外，您可以通过运行下面的代码片段在浏览器中测试这段代码。

const isTouchCapable = 'ontouchstart' in window ||
 (window.DocumentTouch && document instanceof window.DocumentTouch) ||
 navigator.maxTouchPoints > 0 ||
 window.navigator.msMaxTouchPoints > 0;
const qualifier = isTouchCapable ? "IS" : "is NOT";
alert(`Your browser/device ${qualifier} currently capable of recieving touch events.`)

您应该考虑使用经过良好测试的(跨浏览器)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

这个问题很老，但是必须在没有库的情况下做到这一点，我创建了以下解决方案—简单地让事件自己说话—当您看到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的刚定义函数包含实际逻辑....

相关文章：