2

4本の指を下に置いたとします。要素Aに2本の指（1、2）、要素Bに2本の指（3、4）です。

次に、指1と指3を動かしたとします。

指1と3を含むtouchmoveイベントを見る必要があります。changedTouches

しかし、何がtargetTouches含まれますか？1と2、または3と4、または4つすべてが含まれますか？

1と2が同じ要素にあり、3と4が両方とも異なる要素にあるという事実について十分な情報を提供する唯一の方法は、2つの touchmoveイベントを送信することのようです。

私はタッチフレームワークを構築しており、すべての指とそのターゲットを追跡するグローバルデータ構造を構築しているので、何が起こっているのかはわかりますが、targetTouchesイベントが私にすべてを提供できるのであれば、これを完全にスキップすることは可能かどうか疑問に思いました必要な情報。

touchstart私は自分のページでそれをテストしました：

タッチスタート

document.touchstart = function(evt) { console.log("touchstart", evt.targetTouches); }

上記の順序で4本の指を下に置きます。次は、targetTouchesに含まれているものを見つけることができるかどうかを確認します。touchmoveこれは、生成されるデータの量が多いため、より難しいタスクです。

4

1 に答える 1

1

調査結果をiOS6.0（iPhone 5）、iOS5.1.1（iPad 3）、Android4.2.1のNexus7（Chrome 18.0.1025469）、およびNexus7のAndroid17用Firefoxに以下に投稿します。

現在、iPhone5からのデータしかありません。これは大変な作業です。

私がしたことは、スクロールを防ぐために、ページとtouchstart呼び出しで2つの要素を作成することでした。preventDefault()次にtouchmove、そのバッファの長さをカウントし、それchangedTouchesをtargetTouchesDOMに表示しました。さらに、イベントが発生した割合をカウントしました。コードのスニペットは次のとおりです。

// exposed is a variable which other code uses rAF to present a representation of it on the DOM so I can view it
touchmove: function(evt) { 
    evt.preventDefault(); 
    var time = Date.now();
    var diff = time - exposed.touch_move_last_time; 
    if (!exposed.touch_move_last_time) exposed.touch_move_last_time = Date.now();
    if (!exposed.touch_move_rate) exposed.touch_move_rate = 0;
    exposed.touch_move_last_time = time;
    exposed.touch_move_rate += (diff - exposed.touch_move_rate)*0.01;
    exposed.touch_move_changedTouches_count = evt.changedTouches.length;
    exposed.touch_move_targetTouches_count = evt.targetTouches.length;

指を動かすときは、ジグザグではなく円を描くように動かします。これは、ジグザグポイントでは、サンプルレートよりも発生するイベントが少ないためです。収束率が低いため（これは変動し続けない数値を生成するためです）、読み取り値がサンプルレートで安定するまで、約5秒の継続的な摩擦が必要です。

iOS6.0：

1つの要素に2本の指を置き、1本の指を動かします：
changedTouchesサイズ：1（動くもの）
targetTouchesサイズ：2（要素上の2本の指）
サンプルレート：16.66ms

1つの要素に2本の指を置き、両方を動かします：
changedTouchesサイズ：2（両方が動いています）
targetTouchesサイズ：2（要素上の2本の指）
サンプルレート：16.66ms

各要素に1本の指を置き、1本の指を動かします：
changedTouchesサイズ：1（動くもの）
targetTouchesサイズ：1（動くものが最初に触れた要素を指します）
サンプルレート：16.66ms

各要素に1本の指を置き、両方の指を動かします。
changedTouchesサイズ：1（動くもの）
targetTouchesサイズ：1（動くものが最初に触れた要素を指します）
サンプルレート：8.29ms

最初の要素に1本の指を置き、2番目の要素に2本の指を置きます：2番目の要素
で1本の指を動かす場合
changedTouchesサイズ：1
targetTouchesサイズ：2
サンプルレート：16.66ms

2番目の要素で両方の指を動かす場合
changedTouchesサイズ：2
targetTouchesサイズ：2
サンプルレート：16.6ms（最初の指を動かさないようにするのは非常に困難です）

最初の要素で指を動かす場合
changedTouchesサイズ：1
targetTouchesサイズ：1
サンプルレート：16.66ms

最初の要素で指を動かし、2番目の要素で1本の指を動かす場合
changedTouchesサイズ：1
targetTouchesサイズ：1から2の間で変動する
サンプルレート：8.29ms

3本の指すべてを動かす場合
changedTouchesサイズ：1と2の間で変動し
targetTouchesますサイズ：2サンプルレート：約8.3ms

各要素に2本の指を置き、各要素に1本ずつ移動します。
changedTouchesサイズ：1
targetTouchesサイズ：2
サンプルレート：約9ms

サンプルレートが約120Hzのすべてのケースで、指が動いている要素が少なくとも2つあったことは明らかです。これは、touchmove同時に接触した要素ごとに別々に発火することを明確に示しているようです。テストを3つの要素に拡張すると、180Hzのサンプルレートが得られると思います。更新：iPadで3つの要素をテストしましたが、5.4ミリ秒の読み取り値が生成されます。

私にとって少し不思議なのは、なぜ私が常に8.33msではなく8.29msを正確に取得するのかということです。9msの読み取りは、おそらくフルスピードで処理できるよりも処理が多いためです（フレームごとにDOMを更新しているため）

別の更新：

Nexus 7のChromeでは、読み取り値は常に1回のタッチごとに変化するchangedTouchesため、バッファは常にすべてのタッチで満たされているように見えます。webkitForceまた、非常に遅いため、サンプルレートの読み取りでは有用な情報がゼロになります。しかし、ページの最後に順序付けられた要素に存在する指の数を変更することにより、touchmoveイベントも要素ごとに正しく発生しているように見えます。

Nexus 7上のFirefoxは、妥当なサンプルレートの読み取り値を生成するのに少し優れていますが、ディスプレイの更新はChromeよりもさらに遅くなります。Firefoxの途切れが少なくなるまで、コードを正しく動作させるために努力する価値はないと思います。

于 2013-01-05T22:07:41.663 に答える