触摸处理在Chrome 70上完全损坏

Question

看起来谷歌Chrome v70完全搞砸了触摸屏笔记本电脑下D3的使用。

我们正在与松下的FZ-M1平板电脑一起工作，在这里我们运行一些We服务器，它正在创建一个有力有向图的拓扑视图。因为昨天的图表对手势完全没有反应，你不能移动，你不能缩放，什么都不能。我们安装了Chrome v69，然后它运行得非常完美。不幸的是，Chrome正在自动更新。用D3 v5.7.0进行测试，仍然一样。

您可以尝试使用带有D3力定向图示例的触摸屏膝上型计算机或平板电脑，或者在开发工具中启用触摸屏模拟。

Answer 1

D3依赖于ontouchstart属性进行特征检测，即只有在存在此属性时才会附加触摸事件侦听器。由于Chrome v70中的变化，这种检测机制在D3中似乎被打破了。

ontouch* API默认为桌面上禁用 为了避免在触摸特性检测方面的混淆，window、document和element上的ontouch*成员是默认情况下在桌面上禁用 (Mac、Windows、Linux、ChromeOS)。请注意，这不是禁用触摸，也不影响使用(如addEventListener("touchstart", ...) )。

相关：禁用桌面上的遗留触摸事件APIs

运行Windows的膝上型计算机很可能被检测为桌面设备而不是移动设备。因此，它们受到对Chrome v70的这些更改的影响，导致触摸事件侦听器不再注册。

此问题以前曾被报告为d3-拖动模块上的一个问题：https://github.com/d3/d3-drag/issues/47。一旦我就这个问题发表评论，提到这个问题，幸运的是，迈克·博斯托克在一小时内作出了答复。更好的是，有一个简单的解决方案:您可以使用drag.touchable(detector)来控制何时应用触摸事件侦听器覆盖默认行为：

只有在应用拖动行为时检测器返回对应元素的真实值时，才会注册Touch事件侦听器。

正如迈克drag.touchable(navigator.maxTouchPoints)所建议的那样，他似乎是一个很好的候选人。核选项drag.touchable(true)将确保在任何情况下都应用触摸事件侦听器。

Answer 2

在chrome浏览器中打开跟踪

chrome://flags

并找到Touch Events API

将Touch Events API设置为启用的(默认值现在为“禁用”)

希望这能成功。