google-chrome - Chrome 版本 70 上的触摸处理完全中断

Question

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

我们正在使用 Panasonic FZ-M1 平板电脑，我们在其中运行一些网络服务器的东西，这些东西正在创建一个带有力有向图的拓扑视图。从昨天开始，图表对手势完全没有反应，你不能移动，你不能缩放，什么都没有。我们安装了 Chrome v69，然后它就可以完美运行了。不幸的是，Chrome 会自动更新。用 D3 v5.7.0 测试，还是一样。

您可以尝试将触摸屏笔记本电脑或平板电脑与图库中的 D3 力有向图示例一起使用，或者在开发人员工具中启用触摸屏模拟。

标签： google-chromed3.jstouch

Answer 1

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

ontouch* API 在桌面上默认禁用

为避免对触摸功能检测造成混淆，在桌面（Mac、Windows、Linux、ChromeOS）上默认禁用window、document和element上的ontouch* 成员。请注意，这不会禁用触摸，并且不会影响诸如此类的使用。addEventListener("touchstart", ...)

相关：在桌面上禁用旧版触摸事件 API

运行 Windows 的笔记本电脑很可能被检测为桌面设备，而不是移动设备。因此，它们受到 Chrome v70 更改的影响，导致触摸事件侦听器不再注册。

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

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

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