时间戳

首页 > 解决方案 > 在 Windows Chrome #74 上访问触摸属性

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

问题描述

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

UncaughtTypeError：无法在“文档”上执行“elementFromPoint”：提供的双精度值是无限的。

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

我正在使用 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 可以完美地工作。

标签： javascriptd3.jsdragdom-events

解决方案

Can't get coordinate of touchevents in Javascript on Android devices和'touchstart' 事件的 e.PageX 位置是否与点击事件相同？不适用于 Windows 10 的 Chrome #74。要访问适用的 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详细说明了不同的触摸列表，也很有帮助。

所以要在这个环境中执行 document.elementFromPoint，你可以使用

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

推荐阅读