How to capture touchend coordinates?

Question

I am trying to capture touch coordinate on the touchend event but get undefined. The touchstart event works good, but same concept fails on touchend. I built this code with mousedown and mouseup and that works good.

What am I missing?

div.addEvent("touchstart", function (event) {
    event.preventDefault(); // to avoid scrolling
    span.innerHTML = event.page.x;
});
div.addEvent("touchend", function (event) {
    span.innerHTML = event.page.x;
});

FIDDLE

Decoction

Answer 1

You need to store the values on touchmove and read it in touchend.

var lastMove = null;

// Save the touchstart to always have a position
div.addEvent('touchstart', function(event) {
  lastMove = event;
});

// Override with touchmove, which is triggered only on move
div.addEvent('touchmove', function(event) {
  lastMove = event;
});

Causal

Was it that easy? thanks! Why does it work without mousemove on mouseup? – Decoction

That I don't know. And I would have guessed that touchend event would have included the position where it ended, but maybe there are corner cases where it isn't possible to give, like when the touch exits the area (not possible to give explicit value of the current even if the previous was known). mouseup then again is always inside the area and mouseout is used when the area is exited. – Causal

The correct reason seems to be that touch events store the current touches and when touch ends, there are no current touches. – Causal

This came up as a solution to touchend from a Google search, but I always use event.changedTouches[0].pageX on touchend to get the coord, ala: jsfiddle.net/YrQjH/3 – Struggle

Answer 2

I've been looking at the specification, the 4 touch events inherit from the touchEvent object, which has 3 list atributes containing information about all the touches (every finger on the screen) at the time of the event, each list saves touches based on this criteria:

changedTouches: Saves touches that have are out of the targeted element surface.

touches: Saves all current touches.

targetTouch: Saves all current touches that are within the surface of the target element.

The event touchend saves the position where the finger was lifted at changedTouches, and the nothing is saved in any of the other lists, therefore if you need to access this, you should use event.changedTouches[event.changedTouches.length-1], this returns a touch object with pageX and pageY atributes for coordinates.
The whole line would be:

span.innerHTML = event.changedTouches[event.changedTouches.length-1].pageX;

What I haven't been able to understand yet is if there's no coordinate atributes in the touchEvent object, why you get to use them at touchstart and touchmove events, and not with touchend. Maybe the implementation added this shortcut, or I missread.

Adrianneadriano

This is exactly what i needed. On some devices touchmove is not triggered if the movement is more like a tap. So storing the event from within touchmove was failing. This method works every time. :) – Supernaturalism

it's e.originalEvent.changedTouches[...] – Finnish

originalEvent is undefined for the event object found in the handler for touchend. – Adrianneadriano

Answer 3

You should use changedTouches instead touches in touchend

div.addEvent("touchstart", function (event) {
    event.preventDefault(); // to avoid scrolling
    span.innerHTML = event.pageX;
});
div.addEvent("touchend", function (event) {
    span.innerHTML = event.changedTouches[0].pageX;
});

Fideliafidelio

Answer 4

Though the question didn't ask for jQuery, try this code if you need a jQuery alternative. Works on all latest versions of jQuery.

$(document).on('touchstart', '.className', function (e) {
    console.log(e.originalEvent.touches[0].pageX);
});
$(document).on('touchend', '.className', function (e) {
    console.log(e.originalEvent.changedTouches[0].pageX);
});

You can optionally omit 'originalEvent', and use 'changedTouches' for JS only script and jQuery/browsers that doesn't support.

Carpenter

Answer 5

touchStart(event) {
  this.startX = event.touches[0].pageX;
},
touchEnd(event) {
  this.endX = event.changedTouches[0].pageX;
},

Plover

Could you please expand on your answer by providing additional information? Just one or two sentences to explain your code will suffice. – Heather

Answer 6

I advise this works very well and can recover the same event attributes as a conventional computer ...

if(!('ontouchstart' in document.documentElement)){

Object.onmouseup = function(e){
      your code....
}

}else{

Object.ontouchend = function(e){
e = e.changedTouches[e.changedTouches.length-1];
      Your code....
}

}

very easy to manage.

*To manage your code use Google Chrome on a PC, in console mode it captures TOUCH events.

Barman