Abrufen von Touchstart-Koordinaten in einem Touchend-Event

Question

Wenn ein Touchend-Ereignis auftritt, ist es möglich zu wissen, wo die Berührung begonnen hat (Touchstart-Koordinaten)? Auf den ersten Blick sieht dies so einfach aus wie das Speichern der Koordinaten beim Touchstart, aber angenommen, das Ereignis ist an alle DOM-Elemente mit einer bestimmten Klasse angehängt (zB .special). Nun bedenke ich, dass ich zwei Objekte mit der Klasse .special berühre und dann meinen Finger von einem entferne. Ich kann nicht nur den letzten gespeicherten Wert betrachten, weil es der erste Finger sein könnte, den ich angehoben habe.

Wie kann ich unter diesen Umständen die Touchstart-Koordinaten abrufen?

Answer 1

Auf touchstart können Sie alle Werte speichern, die Sie benötigen (wie x, y, Ziel, usw.). Unter touchend können Sie alle gespeicherten Werte dank des Wertes Touch.identifier abrufen, der für jede Berührung eindeutig sein sollte.

Ich habe ein Proof of Concept hier erstellt: http://jsbin.com/adifit/3/

Der folgende Code Spur von x und y Position hält nur, aber Sie können alle Eigenschaften verfolgen, wenn Sie benötigen.

Die Idee hinter dem Code ist:

1. auf touchstart ein Objekt erstellen und speichern alle innerhalb Daten (einschließlich der Berührungs ID)
2. Speicher dieses Objekt in dem Array
3. auf touchend Prüfung der ID der Berührung und versuchen, das entsprechende Objekt im Array zu finden
4. wenn gefunden, als wir fertig sind.

Und der Code:

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

Der obige Code verwendet jQuery, aber es wird nur zur Bequemlichkeit der die Ergebnisse auf dem Bildschirm angezeigt wird, wird jQuery nicht für etwas anderes verwendet.

Answer 2

Verschiedene touch Ereignisse können durch die event.target verbunden werden.

W3C specs on touchmove event:

Das Ziel dieser Veranstaltung muß das gleiche Element sein, das das Berührungsstartereignis empfing, wenn dieser Berührungspunkt auf der Oberfläche platziert wurde, auch wenn der Berührungspunkt, da außerhalb des interaktiven Bereichs bewegt hat, von das Zielelement.

So halten Sie den Überblick über die 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; 
     } 
    } 
} 

HINWEIS: nicht getestet. Ich sehe, dass @Strah eine gute Lösung hat, meine ist etwas vereinfacht und überprüft nur das event.target, nicht die Touch-ID. Aber es zeigt ein ähnliches Konzept.