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

javascript trackpad events
touchmove event
angular 6 touch events
javascript mobile click event
pan event javascript
javascript swipe event
ios touch event javascript
touch click event

I am trying to develop a simple drag/drop UI in my web application. An item can be dragged by a mouse or a finger and then can be dropped into one of several drop zones. When an item is dragged over a drop zone (but not yet released), that zone is highlighted, marking safe landing location. That works perfectly fine with mouse events, but I'm stuck with touchstart/touchmove/touchend family on the iPhone/iPad.

The problem is that when an item's ontouchmove event handler is called, its event.touches[0].target always points to the originating HTML element (the item) and not the element which is currently under the finger. Moreover, when an item is dragged by finger over some drop zone, that drop zone's own touchmove handlers isn't called at all. That essentially means I can't determine when a finger is above any of the drop zones, and therefore can't highlight them as needed. At the same time, when using a mouse, mousedown is correctly fired for all HTML elements under the cursor.

Some people confirm that it's supposed to work like that, for instance http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/: For those of you coming from the normal web design world, in a normal mousemove event, the node passed in the target attribute is usually what the mouse is currently over. But in all iPhone touch events, the target is a reference to the originating node.

Question: is there any way to determine the actual element under a finger (NOT the initially touched element which can be different in many circumstances)?

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

Using Touch Events, But in all iPhone touch events, the target is a reference to the originating node. Question: is there any way to determine the actual element under a finger (NOT  on touchmove: to drag the element without releasing and re-pressing the mouse button. If this interpretation is correct, then the answer is to to handle touchmove events on the same element that was originally clicked on - namely the "body" element. It is not necessary to handle touchmove events of the element you want to drag (the added element).

TouchEvent, touchmove, Triggers when the user moves the touch point across the touch surface. The Event object whenever a touch event is fired holds a wealth of Touch then move your finger to see the current state of the touch and  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

Introduction to Touch events in JavaScript, Events that occur when user touches a touch-based device, belongs to the the touchstart event occured on the same target element as the current target  For the touchmove event, it is a list of the touch points that have changed since the last event. For the touchend event, it is a list of the touch points that have been removed from the surface (that is, the set of touch points corresponding to fingers no longer touching the surface).

The TouchEvent, currentTarget Event Property. ❮ DOM Events ❮ Event Object. Example. Get the element whose event listeners triggered a specific event: alert(  참고 : event.target는 SO How to find out the actual event.target of touchmove javascript event? 질문에 대한 대답으로 당 javascript jquery google-chrome events 309

currentTarget Event Property, There are two ways to tell the browser we don't want it to act: If the handler is assigned using on<event> (not by addEventListener ), then menu . onclick = function ( event ) { if ( event . target . For some browsers (Firefox, Chrome), passive is true by default for touchstart and touchmove events. The target property gets the element on which the event originally occurred, opposed to the currentTarget property, which always refers to the element whose event listener triggered the event. Browser Support. The numbers in the table specify the first browser version that fully supports the property. Technical Details.

Browser default actions, I am trying to develop a simple drag/drop UI in my web application. An item can be dragged by a mouse or a finger and then can be dropped into one of several  The Event object whenever a touch event is fired holds a wealth of information about the touch action; you already saw its changedTouches object, which contains information on touch points changed since the last touch event . Lets take the above example a bit further now, by bringing in the touchmove and touchend events to show the distance

Touch Events - Level 2, The Touch Events specification defines a set of low-level events that The methods used to target/disambiguate coarse input are out of scope for this surface and started on the element that is the target of the current event. The event handler IDL attribute (see [ HTML5 ]) for the touchmove event type. Touch events are typically available on devices with a touch screen, but many browsers make the touch events API unavailable on all desktop devices, even those with touch screens. The reason for this is that some websites use the availability of parts of the touch events API as an indicator that the browser is running on a mobile device.

Comments
  • Dec 2017, latest Chrome, still happening:-(
  • Thank you very much! That's what I needed. I would also like to share a little bit more of magic for those who faced the same problem: add "pointer-events: none" on your draggable element to make elementFromPoint fall through it and catch the real target.
  • I think it's pretty clear that this is a performance compromise. Consider the extra processing that the mobile device would clearly need to do in order to correctly determine the element under the point provided from hardware 60 times per second. It pretty much requires DOM tree traversal and AABB point checks (which admittedly could be made quite fast). My guess is that from Apple's perspective, whether the event target works like it is supposed to or not, sluggish & choppy event performance is less favorable than an easily overlooked bug.
  • @StevenLu Oh really? What about mouseover events? Is that not the exact same performance compromise? We've had that for forever, why is this different?
  • Mobile devices have 100x less compute and up to 10 touches for an up to 3 orders of magnitude impediment.
  • Furthermore, even the behavior of iOS's native touch events do not track the view that is underneath the touch, the touch event is "owned" by the view that it originally started on, and you must explicitly write code to pass the event up to the parent and/or override hit-testing to find out the real actual view that the finger is over. This is all because the task of finding that information isn't necessary most of the time so it isn't performed all of the time.
  • this post needs more +1
  • I'm not seeing originalEvent on TouchEvents, in Chrome v52 anyway. touches is available directly on the TouchEvent.
  • @ericsoco: Looks like some jquery (originalEvent) to me. Something like this should do it: (event.touches && event.touches.length) ? event.touches[0].clientX : event.clientX
  • This answer is amazing! Works perfectly and is much simpler, than the other ones. Just added a "data-..." to my tag and now I know exactly what was hovered!