9

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

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

4

2 に答える 2

10

touchstartには、必要になる可能性のあるすべての値（x、y、targetなど）を格納できます。タッチごとに一意である必要があるtouchend値のおかげで、保存されているすべての値を取得できます。Touch.identifier

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

以下のコードは、位置xとy位置のみを追跡しますが、必要に応じて任意のプロパティを追跡できます。

コードの背後にある考え方は次のとおりです。

  1. オブジェクトをtouchstart作成し、その中にすべてのデータ（タッチIDを含む）を保存する
  2. このオブジェクトを配列に格納します
  3. タッチのIDをtouchend確認し、配列内の対応するオブジェクトを見つけてください
  4. 見つかった場合は、完了しました。

そしてコード：

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は他の目的には使用されていません。

于 2013-03-08T12:13:59.917 に答える
4

を通じてさまざまtouchなイベントを接続できますevent.target。

touchmoveイベントに関する W3C 仕様:

このイベントのターゲットは、タッチ ポイントがターゲット要素のインタラクティブ領域の外に移動した場合でも、このタッチ ポイントがサーフェスに配置されたときに 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 のみをチェックします。しかし、それは同様の概念を示しています。

于 2013-03-15T11:06:50.107 に答える