タッチイベントのタッチスタート座標の取得

Question

タッチイベントが発生すると、タッチがどこから始まったか（タッチスタート座標）を知ることはできますか？一見すると、これはtouchstart中に座標を保存するのと同じくらい簡単ですが、イベントが特定のクラス（つまり.special）のすべてのDOM要素に関連付けられているとします。今度は、.specialクラスの2つのオブジェクトに触れてから、私の指を離してください。私は最後に保存された値を見ることはできません。なぜなら、私が持ち上げた最初の指になる可能性があるからです。

このような状況でタッチスタート座標を取得するにはどうすればよいですか？

Answer 1

touchstartには、必要な（x、y、ターゲットなどの）すべての値を保存することができます。 touchendでは、タッチごとに一意でなければならないTouch.identifierの値のおかげで、すべての格納された値を取得できます。

私はここで概念実証を作成しました： http://jsbin.com/adifit/3/

以下のコードのみxとy位置を追跡しますが、あなたが必要な場合は、プロパティのいずれかを追跡することができます。 touchend上のアレイ

でtouchstartに

1. オブジェクトを作成して（タッチIDを含む）内のすべてのデータを格納
2. ストアこのオブジェクトチェック：

   コードの背後にある考え方でありますそのIDが配列の対応するオブジェクトを見つけようとした場合

3. 完了したよりも見つかった場合。

とコード：

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

上記のコードはjQueryのを使用しますが、それは唯一の画面に結果を表示するの便宜のために使用され、jQueryのは、何かのために使用されていません。

Answer 2

異なるtouchイベントは、event.targetで接続できます。

W3C specs on touchmove event：

このイベントのターゲットは、タッチポイントは以降のインタラクティブ領域外に移動した場合でも、このタッチポイントを表面上に置いたときtouchstartイベントを受信した同じ要素である必要がありますターゲット要素

だから、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; 
     } 
    } 
} 

注：テストされていません。私は@Strahが良い解決策を持っていることを知っている、私は少し簡素化されているだけtouch-idではなく、event.targetをチェックする。しかし、それは同様の概念を示しています。