Accessing touch properties on Windows Chrome #74

Question

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.

I cannot replicate the issue, just guessing... maybe this: https://stackoverflow.com/questions/9585487/cant-get-coordinates-of-touchevents-in-javascript-on-android-devices — altocumulus, May 01 '19 at 19:11
This may be an even better match: https://stackoverflow.com/questions/4780837/is-there-an-equivalent-to-e-pagex-position-for-touchstart-event-as-there-is-fo . If you can confirm that this solves the issue I‘ll mark it as a duplicate. — altocumulus, May 01 '19 at 19:13
Have you seen my comments which refer to questions explicitly dealing with these touch issues? Did these help you in any way? I was pretty sure these could solve your problem. — altocumulus, May 03 '19 at 23:45
Thank you for these pointers. Seems like Chrome on Windows has changed the way to access the Touch List properties. You need to use .item(index) to access an item in the NodeList as opposed to [index]. — interwebjill, May 04 '19 at 00:13

score 1 · Accepted Answer · answered May 04 '19 at 00:02

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)

Accessing touch properties on Windows Chrome #74

1 Answers1

Linked