How to find out the actual event.target of touchmove javascript event?

That's certainly not how event targets are supposed to work. Yet another DOM inconsistency that we're probably all now stuck with forever, due to a vendor coming up with extensions behind closed doors without any review.

Use document.elementFromPoint to work around it.

document.elementFromPoint(event.clientX, event.clientY);

The accepted answer from 2010 no longer works: touchmove does not have a clientX or clientY attribute. (I'm guessing it used to since the answer has a number of upvotes, but it doesn't currently.)

Current solution is:

var myLocation = event.originalEvent.changedTouches[0];
var realTarget = document.elementFromPoint(myLocation.clientX, myLocation.clientY);

Tested and works on:

• Safari on iOS
• Chrome on iOS
• Chrome on Android
• Chrome on touch-enabled Windows desktop
• FF on touch-enabled Windows desktop

Does NOT work on:

• IE on touch-enabled Windows desktop

Not tested on:

• Windows Phone

I've encountered the same problem on Android (WebView + Phonegap). I want to be able to drag elements around and detect when they are being dragged over a certain other element. For some reason touch-events seem to ignore the pointer-events attribute value.

Mouse:

• if pointer-events="visiblePainted" is set then event.target will point to the dragged element.
• if pointer-events="none" is set then event.target will point to the element under the dragged element (my drag-over zone)

This is how things are supposed to work and why we have the pointer-events attribute in the first place.

Touch:

• event.target always points to the dragged element, regardless of pointer-events value which is IMHO wrong.

My workaround is to create my own drag-event object (a common interface for both mouse and touch events) that holds the event coordinates and the target:

• for mouse events I simply reuse the mouse event as is

• for touch event I use:

  DragAndDrop.prototype.getDragEventFromTouch = function (event) {
      var touch = event.touches.item(0);
      return {
          screenX: touch.screenX,
          screenY: touch.screenY,
          clientX: touch.clientX,
          clientY: touch.clientY,
          pageX: touch.pageX,
          pageY: touch.pageY,
          target: document.elementFromPoint(touch.screenX, touch.screenY)
      };
  };
  

And then use that for processing (checking whether the dragged object is in my drag-over zone). For some reason document.elementFromPoint() seems to respect the pointer-events value even on Android.