Recupero delle coordinate touchstart in un evento touchend

Question

Quando si verifica un evento touchend, è possibile sapere dove ha avuto inizio il tocco (coordinate touchstart)? A prima vista, sembra facile come salvare le coordinate durante il touchstart, ma supponiamo che l'evento sia collegato a tutti gli elementi DOM con una particolare classe (ad esempio .special). Ora considera che tocco due oggetti con la classe .special e poi togli il dito da uno di essi. Non posso solo guardare l'ultimo valore salvato, perché potrebbe essere il primo dito che ho sollevato.

Come posso recuperare le coordinate dell'avvio in queste circostanze?

Answer 1

Su touchstart è possibile memorizzare tutti i valori necessari (come x, y, destinazione, ecc.). Su touchend puoi recuperare tutti i valori memorizzati grazie al valore Touch.identifier che dovrebbe essere unico per ogni tocco.

ho creato un proof of concept qui: http://jsbin.com/adifit/3/

Il codice qui sotto registra posizione x e y solo, ma si può tenere traccia di una qualsiasi delle proprietà, se avete bisogno.

L'idea alla base del codice è:

1. su touchstart creare un oggetto e memorizzare tutti i dati all'interno (compreso il tocco ID)
2. negozio di questo oggetto nella matrice
3. sul touchend controllo della id del tocco e prova a trovare l'oggetto corrispondente nell'array
4. se trovato di quanto abbiamo fatto.

E il codice:

var touches = []; 
var cons; 

$(init); 

function init() 
{ 
    cons = $("#console"); 
    document.getElementById("area").addEventListener("touchstart", onTouchStart); 
    document.addEventListener("touchend", onTouchEnd); 
    document.addEventListener("touchcancel", onTouchEnd); 
} 

function onTouchStart(e) 
{ 
    e.preventDefault(); 
    var touchList = e.changedTouches; 
    var touch; 
    for(var i = 0; i < touchList.length; i++) 
    { 
    cons.html(cons.html() + "startX: " + touchList[i].screenX + ", id: " + touchList[i].identifier + "<br/>"); 
    touch = {x: touchList[i].screenX, y: touchList[i].screenY, id: touchList[i].identifier}; 
    touches.push(touch); 
    } 
} 

function onTouchEnd(e) 
{ 
    cons.html(cons.html() + "<strong>TouchEnd:</strong><br/>"); 
    var touchList = e.changedTouches; 
    var touch; 
    for(var i = 0; i < touchList.length; i++) 
    { 
    touch = {x: touchList[i].screenX, y: touchList[i].screenY, id: touchList[i].identifier}; 
    for (var j = touches.length - 1; j >= 0 ; j--) 
    { 
     if (touches[j].id == touch.id) 
     { 
     cons.html(cons.html() + "<strong>startX: "+ touches[j].x+ ", id: " + touchList[i].identifier + "</strong><br/>"); 
     touches.splice(j, 1); 
     } 
    } 
    } 
} 

Il codice precedente utilizza jQuery, ma viene utilizzato solo per comodità di visualizzazione dei risultati sullo schermo, jQuery non viene utilizzato per altri scopi.

Answer 2

Diversi eventi touch possono essere collegati tramite event.target.

W3C specs on touchmove event:

L'obiettivo di questo evento deve essere lo stesso elemento che ha ricevuto l'evento TouchStart quando questo punto di contatto è disposto sulla superficie, anche se il punto di contatto è poi trasferito all'esterno dell'area interattiva degli l'elemento obiettivo.

in modo da mantenere traccia del event.target:

document.addEventListener("touchstart", onTouchStart); 
document.addEventListener("touchend", onTouchEnd); 
document.addEventListener("touchcancel", onTouchCancel); 

var targets = []; // create array with all touch targets 
        // still needs some sort of garbage collection though 

function onTouchStart(event){ 
    targets.push(event.target); // add target to array 
} 

function onTouchEnd(event){ 
    // loop through array to find your target 
    for (var i = 0; i < targets.length; i++) { 
     if (targets[i] == event.target) { //test target 
      // this is your match! Do something with this element 
      targets[i].splice(i,1); // remove entry after event ends; 
     } 
    } 
} 

function onTouchCancel(event){ 
    // loop through array to find your target 
    for (var i = 0; i < targets.length; i++) { 
     if (targets[i] == event.target) { //test target 
      // Just delete this event 
      targets[i].splice(i,1); // remove entry after event ends; 
     } 
    } 
} 

NOTA: non testato. Vedo che @Strah ha una buona soluzione, la mia è un po 'semplificata e controlla solo event.target, non il touch-id. Ma dimostra un concetto simile.