問題タブ [touchmove]

touchmoveブラウザでイベントを使用してマルチタッチ ジェスチャを検出する方法を学習しようとしています。touchmove イベントがキャプチャされると、現在のタッチ ポイントのリストを取得できます。ただし、これはジェスチャの検出にはあまり役立ちません。タッチイベントの履歴を取得したい。たとえば、現在の個別の各タッチ ポイントの前にある最後の 10 個のタッチ ポイント (利用可能な場合) のリストを取得したいと考えています。私が求めているものを視覚化するために、以下の図を描きます。

ユーザーが画面上で 2 本の別々の指を 2 つの異なるパターン (異なる手の指) でドラッグしているこのシナリオで述べたように、touchmoveイベント内で 2 つのタッチ ポイントしか受け取りません。ポイントAとBに到達する前に、2 つのポイントのそれぞれがどこにあったかの履歴にアクセスすることは可能ですか?

touchmoveイベントをキャプチャするための関連コードは次のとおりです。

サード パーティのライブラリを提案しないでください。私の目標は、独自のカスタム真のマルチタッチ ジェスチャを定義して検出する方法を学ぶことです。

要素のスクロール オフセットを別の要素 (実際にはウィンドウ) と同期させる必要があり、Mobile Safari (iPad) でのスクロールの慣性的な「ロール オフ」フェーズで同期を行うのに問題があります。

いくつかの div がposition:fixed; overflow:hiddenあり、それらのスクロール オフセットをウィンドウの 1 つ (つまり、ボディ全体のスクロール) と同期させる必要があります。通常、次のようにコーディングします (jQuery):

しかし、iPad でインターフェイスをテストしたところ、仮想ページを指でドラッグしているタッチ段階でも、指を離してページの速度が遅くなる慣性段階でも、div が更新されていないことに気付きました。停止します。

touchmoveイベントのハンドラーとイベントのハンドラーを登録することで、ドラッグフェーズで解決しましたscroll。

しかし、慣性段階の問題を解決する方法が見つかりません。慣性運動が完全に停止し、最後にスクロール イベントが発生して所定の位置にスキップするまで、div は静止したままになります (ページの残りの部分とはゆっくりと同期しなくなります)。

これが実際のデモです。

「慣性スクロール」の問題を確認するには、iPad でスクロールしてみてください。残念ながら、iframe スクロールでの iPad の奇妙な動作のため、jsFiddle で動作させることができませんでした。

そのフェーズでポーリングを実行できれば、2 つの要素間の同期を維持できます。setTimeout、setInterval、およびで試しましrequestAnimationFrameたが、どちらも慣性スクロール フェーズ中に起動しません。そのフェーズでは、すべての Javascript が停止するようです。

質問:

• 慣性スクロール フェーズ中に発生するタッチまたはスクロール イベントはありますか?
• その段階で Javascript コールバックを実行する方法はありますか?
• CSS または JS 以外の他の技術を使用して、2 つの要素 (両方ではなく X または Y のいずれか) のスクロール オフセットを同期する方法はありますか?

バックラウンドの位置を変更する単純な視差効果を作成しようとしていますが、iOS Safari では動きがスムーズではありません。背景は、タッチスクリーンを離したときにのみ位置が変わりますが、スクロールしても変わりません。

Javascript:

実際には、 chnaging だけでなくbackgroundPosition、topfor div 要素でも発生します。

同時にmargin-top正常に動作し、動きはスムーズです。

何が間違っているのですか? また、マウスホイールイベントと同じように iOS で動作させるにはどうすればよいですか?

touchmoveiPad でもデスクトップでも機能するシンプルな Web アプリを作成できるように、Google アプリ スクリプト HTML サービスを使用して記述されたシンプルな Web アプリにイベントを登録しようとしています。

最初に Web ページをロードするだけで、期待どおりに動作します。

次に、html ページに単純なキャンバスを作成しました。

これは私が試した最新の変種です。デスクトップ上のこの例では、バインドまたはすべてが正常に機能しますclick。ただし、iPadで試してみる か、何もしないでください。iPad で Chrome と Safari の両方をテストしました。mousedownmousemovetouchstarttouchmove

私はまた、次のようなものを追加しようとしました:

を呼び出す単純な関数がありますがpreventDefault()、それも役に立ちませんでした。

私は何か間違ったことをしていますか、それともGoogle Appsスクリプトhtmlサービスであるため、何か違うことをしなければなりませんか?

私は今jQueryで試しました（その方法を読んでください）が、それでもiPadでは正しく動作しないようです：

mousedownイベントは正常に機能し、イベントはタッチで機能します。実際、iPad ではタッチと機能しているように見えますmousedown。mouseupしかし、機能せず、またはもmousemove機能しません。上記のように、バインドなどをより直接的に試しました。touchmovetouchstarttouchend

この作業を行うために私が間違っていることはありますか?

マウスの移動を使用してスマートフォンでも動作する機能を補完しようとする場合、どのような違いに注意する必要があります.

これまでのところ、Androidで取得できることを学びました

• マウスムーブの代わりにタッチムーブ、
• マウスダウンの代わりにタッチスタート、
• マウスアップの代わりにタッチエンド
• event.touches[0].pageX の代わりに event.clientX
• event.touches[0].pageY の代わりに event.clientY

しかし、それだけでは十分ではありません。コードはまだ正しく動作しません。動作させる前に、さらに何を学ぶ必要がありますか?

例: http://paint.puggan.se/paint/paint_201305311921.html

同じグループ内のある点から別の点にドラッグすると、それらの間に黄色の線が追加されます。ペイントをドラッグして青い線を最も近いところまでドラッグしている間、近くにドラッグするか、マウスを停止すると、黄色い線が追加されます。

上記は、私のコンピューターのFirefoxのマウスで正常に動作します。

上記は私のAndroidでは機能しません。青い線は見えますが、黄色の線は表示されません

ここでわかるように: http://jsfiddle.net/hWm9M/1/画像がスケーリング されている間に実行することで、イベントが期待どおりに添付されtouchmoveていることをコンソールで確認できます。touchmove ただし、完全にスケーリングすると、イベントは発生しません。イベントをtransitionendに添付しようとしましたが、うまくいきませんでした。

コードは次のとおりです。

何か案が？