Pobieranie współrzędnych punktów początkowych w wydarzeniu touchenda

Question

Kiedy pojawia się zdarzenie touchend, czy możliwe jest ustalenie miejsca rozpoczęcia dotyku (współrzędne punktu początkowego)? Na pierwszy rzut oka wygląda to tak łatwo, jak zapisywanie współrzędnych podczas startu dotykowego, ale załóżmy, że zdarzenie jest dołączone do wszystkich elementów DOM z określoną klasą (np. .special). Teraz pomyśl, że dotykam dwóch obiektów klasą .special, a następnie odsuwam od niej palec. Nie mogę po prostu spojrzeć na ostatnią zaoszczędzoną wartość, ponieważ może to być pierwszy palec, który podniosłem.

Jak mogę pobrać współrzędne touchstart w tych okolicznościach?

Answer 1

Możesz zapisać wszystkie potrzebne wartości (np. X, Y, Target itd.). Na touchend możesz odzyskać wszystkie zapisane wartości dzięki wartości Touch.identifier, która powinna być unikalna dla każdego dotyku.

Stworzyłem dowodu koncepcji tutaj: http://jsbin.com/adifit/3/

Poniższy kod śledzi x i y pozycji tylko, ale można śledzić którąkolwiek z właściwości, jeśli trzeba.

Ideą kod jest:

1. na touchstart utworzyć obiekt i zapisać wszystkie wewnętrzne dane (w tym dotykowy ID)
2. sklep ten obiekt w tablicy
3. na touchend sprawdzaj id dotyku i spróbuj znaleźć odpowiedni obiekt w tablicy, jeśli zostanie znaleziony, niż skończymy.

I kod:

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

Powyższy kod używa jQuery, ale jest używany tylko dla wygody wyświetlania wyników na ekranie, jQuery nie służy do niczego innego.

Answer 2

Różne zdarzenia touch można łączyć za pomocą event.target.

W3C specs on touchmove event:

Celem tego wydarzenia musi być ten sam element, który otrzymał zdarzenie touchstart gdy punkt ten dotyk był umieszczony na powierzchni, nawet jeśli punkt dotykowy od tego czasu przeniósł się poza interaktywnej powierzchni element docelowy.

więc śledzić 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; 
     } 
    } 
} 

UWAGA: nie testowane. Widzę, że @Strah ma dobre rozwiązanie, moje jest nieco uproszczone i sprawdza tylko event.target, a nie identyfikator dotyku. Ale demonstruje podobną koncepcję.