访问 Windows Chrome 上的触摸属性 #74

Question

我遇到了 here and here 提出的问题。我的 d3 应用程序通过 Mac 上的触摸屏在 Chrome 上完美运行，但是当我切换到 Windows 生产机器运行 [=29= 时 d3.drag 失败] v.74。我按照上面链接页面的建议应用了解决方案 .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 and Is there an equivalent to e.PageX position for 'touchstart' event as there is for click event? 提供的解决方案不适用于 Chrome #74 for Windows 10。要访问拖动事件的适用 TouchLists 和坐标 e，你会用

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 详细介绍了不同的 Touch List，也很有帮助。

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

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

访问 Windows Chrome 上的触摸属性 #74

Accessing touch properties on Windows Chrome #74

javascript

drag

dom-events

d3.js