在Windows Chrome#74上访问触摸属性 [英] Accessing touch properties on Windows Chrome #74

问题描述

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

I was experiencing the issue raised here and here. My d3 app works perfectly on Chrome via a touch display on Mac, but d3.drag failed when I switched to the Windows production machine running Chrome v.74. I applied the solution .touchable(navigator.maxTouchPoints), as suggested by the linked pages above. This allowed me to drag the element in Windows Chrome v.74 using the touch screen, but am now getting:

UncaughtTypeError:无法在'Document'上执行'elementFromPoint':提供的double值是非限定的.

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

所以我的拖动事件不会触发.

so my drag events aren't firing.

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

I am using document.elementFromPoint() to detect when the dragged element is over another element:

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可以在我使用鼠标时很好地工作.

This is a touch-only issue, as the drag and document.elementFromPoint work perfectly when I use a mouse.

推荐答案

在touchstart事件中，e.PageX的位置是否与click事件中的e.PageX位置相同? don不适用于Windows 10的Chrome#74.要访问适用的触摸列表和拖动事件e的坐标，您可以使用

The solutions offered by 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? don't apply in Chrome #74 for Windows 10. To access the applicable TouchLists and coordinates for drag event e, you would use

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

用于拖动和

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

获取拖动结束时的坐标.

for the coordinates upon drag end.

您可以通过登录e.sourceEvent看到此内容.这个 SO答案(详细介绍了不同的触摸列表")也很有帮助.

You can see this by logging e.sourceEvent. This SO answer, which details the different Touch Lists, is helpful as well.

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

So to execute document.elementFromPoint in this environment, you would use

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

这篇关于在Windows Chrome#74上访问触摸属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！