javascript - ¿Cómo capturar las coordenadas del toque?

touch mootools

Question

Estoy tratando de capturar las coordenadas táctiles en el evento de touchend pero me touchend indefinido. El evento touchstart funciona bien, pero el mismo concepto falla en touchend . Construí este código con mousedown y mouseup y that funciona bien.

¿Qué me estoy perdiendo?

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

Aunque la pregunta no era para jQuery, pruebe este código si necesita una alternativa a jQuery. Funciona en todas las últimas versiones de 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);
});

Opcionalmente, puede omitir ''originalEvent'' y usar ''changedTouches'' para el script solo JS y jQuery / browsers que no son compatibles.

Answer 2

Deberías usar el changedTouches touches touchend en lugar de touches 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 3

He estado buscando en la specification , los 4 eventos táctiles heredados del objeto touchEvent , que tiene 3 atributos de lista que contienen información sobre todos los toques (cada dedo en la pantalla) en el momento del evento, cada lista guarda toques basados ​​en este criterio:

changedTouches : guarda los toques que tienen fuera de la superficie del elemento objetivo.

touches : guarda todos los toques actuales.

targetTouch : guarda todos los toques actuales que están dentro de la superficie del elemento objetivo.

El evento del evento guarda la posición donde se levantó el dedo en changedTouches , y la nada se guarda en cualquiera de las otras listas, por lo tanto, si necesita acceder a este, debe usar event.changedTouches[event.changedTouches.length-1] , Esto devuelve un objeto táctil con los atributos pageX y pageY para las coordenadas.
Toda la línea sería:

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

Lo que no he podido entender aún es si no hay atributos de coordenadas en el objeto touchEvent , por qué puede usarlos en eventos de inicio y toque de movimiento, y no con touchend. Tal vez la implementación haya agregado este atajo, o lo haya leído mal.

Answer 4

touchmove almacenar los valores en touchmove y leerlos en 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 5

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