Wie berührst du Koordinaten?

Question

Ich versuche, Touch-Koordinaten auf dem touchend Ereignis zu erfassen, aber nicht definiert. Das touchstart Ereignis funktioniert gut, aber das gleiche Konzept schlägt auf touchend fehl. Ich baute diesen Code mit mousedown und mouseup und that funktioniert gut.

Was fehlt mir?

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

Sie müssen die Werte auf touchmove speichern und in touchend zu lesen.

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

Ich habe am specification suchen, die 4 Touch-Ereignisse aus dem touchEvent Objekt erben, die 3 Liste atributes die alle berührt, die Informationen hat etwa (jeder Finger auf dem Bildschirm) zum Zeitpunkt der Ereignis, jede Liste speichert Berührungen basierend auf diesem Kriterium:

changedTouches: Speichert Berührungen, die außerhalb der Zielelementoberfläche liegen.

touches: Speichert alle aktuellen Berührungen.

targetTouch: Speichert alle aktuellen Berührungen innerhalb der Oberfläche des Zielelements.

Das Ereignis touchend speichert die Position, an der der Finger bei changedTouches angehoben wurde, und das Nichts wird in einer der anderen Listen gespeichert. Wenn Sie darauf zugreifen müssen, verwenden Sie event.changedTouches[event.changedTouches.length-1], dies gibt ein Touch-Objekt mit pageX und zurück pageY-Attribute für Koordinaten.
Die ganze Linie wäre:

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

Was habe ich nicht in der Lage gewesen, noch zu verstehen, wenn nicht gibt es atributes im touchEvent Objektkoordinate, warum bekommt man sie bei Berührungsstart und Berührungsbewegungsereignisse zu verwenden, und nicht mit Touchend. Vielleicht hat die Implementierung diese Abkürzung hinzugefügt, oder ich habe es übersehen.

Answer 3

sollten Sie changedTouches anstelle 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

Obwohl die Frage nicht für jQuery gefragt hat, diesen Code versuchen, wenn Sie eine alternative jQuery benötigen. Funktioniert mit allen neuesten Versionen von 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); 
}); 

Optional können Sie weglassen ‚originalEvent‘, und verwenden Sie ‚changedTouches‘ für JS nur Skript und jQuery/Browser, die nicht unterstützt.