Chrome 如何在JavaScript中检测设备触摸支持?

rkkpypqq  于 2023-05-11  发布在  Go
关注(0)|答案(4)|浏览(269)

在过去,当检测设备是否支持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)

离理想还差得远。。

xzv2uavs

xzv2uavs1#

正确的答案是处理 * 两种 * 事件类型--它们并不互斥。
要获得更可靠的触摸支持测试,还可以查找window.DocumentTouch && document instanceof DocumentTouch,它是Modernizr使用的测试之一
更好的是,你自己使用Modernizr,让它为你做特征检测。
请注意,您无法防止误报,因此我上面的第一行-您必须支持两者。

nvbavucw

nvbavucw2#

这是Modernizr执行触摸检测的方式的修改,增加了对IE10+触摸设备的支持。

const 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,例如,在安装了触摸屏的驱动程序但触摸硬件不起作用或未安装的系统中。
  • 在混合鼠标/触摸/触控板/笔/键盘环境中,这并不表明正在使用哪个输入,只是浏览器检测到触摸硬件存在。例如,用户可以在任何时刻从使用鼠标切换到触摸启用触摸的膝上型计算机或鼠标连接的平板电脑上的屏幕。它只会检测浏览器是否认为它可以接受或模拟触摸输入,例如,在Chrome开发工具中使用移动的模拟模式时。
    **更新:**提示:不要使用触摸功能检测来控制和指定UI行为,use event listeners instead。针对点击/触摸/按键事件而不是设备进行设计,触摸功能检测通常用于保存添加事件侦听器的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.`)
n9vozmp4

n9vozmp43#

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

tyu7yeag

tyu7yeag4#

好吧,这是个老问题了,但是必须在没有库的情况下完成这项工作,我创建了以下解决方案--简单地让事件自己说话--当您看到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

它们只是为touchstartmoveend定义了包含实际逻辑的函数。

相关问题