The solution recommended in a 2010 accepted answer is now outdated as the touchmove event no longer contains clientX or clientY attributes. It seems these attributes were removed in newer versions.

The updated solution is as follows:

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

This solution has been tested and confirmed to work on various platforms including:

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

However, it has been reported not to work on:

• IE on touch-enabled Windows desktop

It has not been tested on:

• Windows Phone

To implement implicit pointer capture, use

event.target.releasePointerCapture(event.pointerId)

It's now 2022, and this behavior is intentional and specified - known as "Implicit Pointer Capture".

Refer to the W3 specification on Pointer Events for more information.

Direct manipulation devices should act as if setPointerCapture was called on the target element just before any pointerdown listeners are invoked. You can check whether this has occurred using the hasPointerCapture API (e.g., within a pointerdown listener).

While elementFromPoint is one option, you can also utilize releasePointerCapture, demonstrated in the following example. Holding down on the green div will trigger mouse move events outside of it, while the red div behaves normally.

const outputDiv = document.getElementById('output-div');
const releaseDiv = document.getElementById('test-release-div');
const noreleaseDiv = document.getElementById('test-norelease-div');

releaseDiv.addEventListener('pointerdown', function(e) {
  outputDiv.innerHTML = "releaseDiv-pointerdown";
  if (e.target.hasPointerCapture(e.pointerId)) {
      e.target.releasePointerCapture(e.pointerId);
  }
});

noreleaseDiv.addEventListener('pointerdown', function(e) {
  outputDiv.innerHTML = "noreleaseDiv-pointerdown";
});

document.addEventListener('pointermove', function(e) {
  outputDiv.innerHTML = e.target.id;
});

<div id="output-div"></div>
<div id="test-release-div" style="width:300px;height:100px;background-color:green;touch-action:none;user-select:none">Touch down here and move around, this releases implicit pointer capture</div>

<div id="test-norelease-div" style="width:300px;height:100px;background-color:red;touch-action:none;user-select:none">Touch down here and move around, this doesn't release implicit pointer capture<div>

Touch events and mouse events have different ways of interaction:

• When the mouse moves, it behaves like a "hover"
• When touch moves, it behaves like a "drag"

This distinction stems from the fact that a touchmove event cannot occur without a touchstart event preceding it, as the user must physically touch the screen to initiate the interaction. In contrast, with a mouse, a user can move it around the screen without clicking any buttons.

Because of this fundamental difference, hover effects cannot be used effectively with touch devices:

element:hover { 
    background-color: yellow;
}

When a user touches the screen with one finger, the first event (touchstart) captures the target element, while subsequent events (touchmove) maintain reference to the original element where the touch started. This may seem counterintuitive, but it serves the purpose of preserving information about the original target. Ideally, future improvements should provide access to both the source target and current target.

In the current practice (as of 2018), where screens support both mouse and touch input simultaneously, it is common to attach listeners for both types of input and then "normalize" event coordinates. The browser API mentioned above is used to identify the element at those coordinates:

// get coordinates based on pointer type:
var xcoord = event.touches ? event.touches[0].pageX : event.pageX;
var ycoord = event.touches ? event.touches[0].pageY : event.pageY;
// identify the element at specified coordinates:
var targetElement = document.elementFromPoint(xcoord, ycoord);
// check if the element is suitable for our needs:
if (targetElement && targetElement.classList.contains("dropZone")) {
}

In my experience with Android (using WebView + Phonegap), I have encountered a similar issue. My goal is to enable the ability to drag elements and detect when they are dragged over a specific element. Interestingly, touch-events appear to disregard the value of the pointer-events attribute.

Regarding Mouse Events:

• If pointer-events="visiblePainted" is defined, then event.target will refer to the element being dragged.
• If pointer-events="none" is specified, then event.target will point to the element beneath the dragged element (the drag-over zone).

This functionality aligns with the intended purpose of the pointer-events attribute.

Touch Events:

• event.target consistently refers to the dragged element, regardless of the pointer-events value, which appears to be incorrect in my opinion.

To address this issue, I have devised a workaround by creating a custom drag-event object (a unified interface for both mouse and touch events) that includes event coordinates and the target element:

• For mouse events, I directly utilize the mouse event data.

• For touch events, I implement the following:

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

I then utilize this approach for processing (validating if the dragged object is within my drag-over zone). Strangely, it seems that document.elementFromPoint() respects the pointer-events value even on Android.

Unfortunately, JSP64's solution was not entirely effective as the event.originalEvent consistently returned undefined. However, by making a small adjustment as shown below, the issue is resolved.

let touchCoordinates = event.touches[0];
let targetElement = document.elementFromPoint(touchCoordinates.clientX, touchCoordinates.clientY);