javascript - 在 Windows Chrome #74 上访问触摸属性

Question

我遇到了提出的问题 here和 here .我的 d3 应用程序通过 Mac 上的触摸屏在 Chrome 上完美运行，但是当我切换到运行 Chrome v.74 的 Windows 生产机器时 d3.drag 失败。我按照上面链接页面的建议应用了解决方案 .touchable(navigator.maxTouchPoints)。这让我可以使用触摸屏在 Windows Chrome v.74 中拖动元素，但现在得到:

UncaughtTypeError: Failed to execute 'elementFromPoint' on 'Document': The provided double value is non-finite.

所以我的拖动事件没有触发。

我正在使用 document.elementFromPoint() 来检测拖动的元素何时位于另一个元素之上:

this.svg.dragCirclesGroup
   .call(drag()
     .touchable(navigator.maxTouchPoints)
     .on("start", this.dragStarted)
     .on("drag", this.dragged)
     .on("end", this.dragEnded));

dragged() {
  select(this).attr("transform","translate("+[event.x,event.y]+")")
  let hitZone = select(document.elementFromPoint(event.sourceEvent.clientX, event.sourceEvent.clientY)).attr("id");
  if ((hitZone == "yHitZone") || (hitZone == "xHitZone")) {
    select('body').classed("plus", true);
  } else {
    select('body').classed("plus", false);
  }
}

这是一个仅限触摸的问题，因为当我使用鼠标时拖动和 document.elementFromPoint 工作得很好。

Answer 1

Can't get coordinates of touchevents in Javascript on Android devices提供的解决方案和 Is there an equivalent to e.PageX position for 'touchstart' event as there is for click event?不适用于 Windows 10 的 Chrome #74。要访问拖动事件 e 的适用 TouchLists 和坐标，您可以使用

e.sourceEvent.touches.item(0).clientX 和 e.sourceEvent.touches.item(0).clientY

用于拖动和

e.sourceEvent.changedTouches.item(0).clientX 和 e.sourceEvent.changedTouches.item(0).clientY

为拖动结束时的坐标。

您可以通过记录 e.sourceEvent 来查看。这SO answer详细介绍了不同的触摸列表，这也很有帮助。

因此要在此环境中执行 document.elementFromPoint，您将使用

document.elementFromPoint(e.sourceEvent.changedTouches.item(0).clientX, e.sourceEvent.changedTouches.item(0).clientY)