Come catturare le coordinate del touch-end?

Question

Sto tentando di acquisire coordinate di tocco sull'evento touchend ma ottenere undefined. L'evento touchstart funziona correttamente, ma lo stesso concetto non riesce su touchend. Ho creato questo codice con mousedown e mouseup e that funziona bene.

Cosa mi manca?

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

Answer 1

avete bisogno di memorizzare i valori su touchmove e leggerlo 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; 
}); 

Answer 2

Ho cercato in specification, i 4 eventi di tocco ereditano dall'oggetto touchEvent, che ha 3 atributes elenco contenente le informazioni su tutti i tocchi (ogni dito sullo schermo) al momento della evento, ogni elenco salva i tocchi in base a questi criteri:

changedTouches: Salva i tocchi che sono fuori dalla superficie dell'elemento mirato.

touches: salva tutti i tocchi correnti.

targetTouch: Salva tutti i tocchi correnti che si trovano all'interno della superficie dell'elemento di destinazione.

Il touchend dell'evento salva la posizione in cui il dito è stato sollevato a changedTouches e il nulla viene salvato in nessuno degli altri elenchi, quindi se è necessario accedere a questo, è necessario utilizzare event.changedTouches[event.changedTouches.length-1], questo restituisce un oggetto tocco con pageX e Pagina Y attribuisce per coordinate.
L'intera linea sarebbe:

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

Quello che non sono stato in grado di capire ancora è se non c'è coordinare atributes nell'oggetto touchEvent, perché si arriva a usarli in occasione di eventi TouchStart e TouchMove, e non con touchend. Forse l'implementazione ha aggiunto questa scorciatoia o mi sono sbagliato.

Answer 3

Si dovrebbe usare changedTouches invece 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; 
}); 

Answer 4

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

Answer 5

Anche se la questione non ha chiesto per jQuery, provare questo codice, se avete bisogno di un jQuery alternativo. Funziona su tutte le ultime versioni di 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); 
}); 

Opzionalmente si può omettere 'originalEvent', e utilizzare '' per changedTouches JS solo script e jQuery/browser che non supporta.