Accessing touch properties on Windows Chrome #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: Failed to execute 'elementFromPoint' on 'Document': The provided double value is non-finite.

so my drag events aren't firing.

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);
  }
}

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

回答1:

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 and e.sourceEvent.touches.item(0).clientY

for dragging and

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

for the coordinates upon drag end.

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

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)

来源：https://stackoverflow.com/questions/55940323/accessing-touch-properties-on-windows-chrome-74

标签

javascript

d3.js

drag

dom-events