Chrome版本70上的触摸处理功能完全中断

时间:2018-11-09 18:53:01

标签: google-chrome d3.js touch

像Google Chrome v70一样,在触摸屏笔记本电脑上完全破坏了D3的使用。

我们正在使用Panasonic FZ-M1平板电脑,在该平板电脑上运行一些网络服务器,这些服务器正在创建带有力向图的拓扑视图。 由于昨天图形完全不响应手势,因此无法移动,无法缩放,什么也没有。 我们安装了Chrome v69,然后完美运行。不幸的是,Chrome正在自动更新。 经过D3 v5.7.0的测试,仍然相同。

您可以通过在gallery中将触摸屏笔记本电脑或平板电脑与D3力向图示例结合使用,或在开发人员工具中启用触摸屏模拟。

2 个答案:

答案 0 :(得分:3)

在Chrome浏览器中打开以下内容

chrome://flags

并找到 Touch Events API

Touch Events API 设置为 Enabled (默认为“ Disabled”)

希望如此。

答案 1 :(得分:2)

D3依靠ontouchstart属性来进行特征检测,即,只有存在此属性时,才附加触摸事件监听器。由于Chrome v70中的changes,这种检测机制在D3中似乎已被破坏。

  

ontouch * API默认在台式机上禁用

     

为避免混淆触摸功能检测,windowdocumentelement上的ontouch *成员为disabled by default on desktop(Mac,Windows,Linux,ChromeOS)。请注意,这不会禁用触摸,并且addEventListener("touchstart", ...)等用法也不会受到影响。

相关:Disable legacy touch event APIs on desktop

您的运行Windows的笔记本电脑最有可能被检测为台式设备,而不是移动设备。因此,它们会受到Chrome v70的那些更改的影响,从而导致不再注册触摸事件监听器。

此问题先前已报告为d3-drag模块#47 Upcoming touch detection changes in desktop Chrome上的一个问题。我对这个问题发表评论后,对此问题提供了参考,幸运的是,迈克·波斯托克(Mike Bostock)在一个小时内回答了。更妙的是,有一个简单的问题解决方案:您可以使用drag.touchable(detector)来控制何时应用触摸事件监听器来覆盖默认行为:

  

仅当检测器在应用拖动行为时返回相应元素的真实值时,才注册触摸事件侦听器。

正如Mike drag.touchable(navigator.maxTouchPoints)所建议的那样,它似乎是一个不错的候选人。核选项drag.touchable(true)将确保在任何情况下都可以应用触摸事件监听器。