14

コンテキスト：フルスクリーンとiframeに埋め込まれたMobileSafari/iPad上のWebアプリ

目標：ピンチ（ズーム）またはドラッグ（スクロール/パン）ではなく、プレスアンドタップ用のカスタムイベントハンドラーを提供する手法。Pressにカスタム動作を提供したいのですが、Safariがスクロール/パン/ズームを引き続き処理できるようにします。

問題：2つの目標は相互に排他的であるように思われます。Pressジェスチャのデフォルトの動作を防ぐには、ontouchstartへの即時応答でevent.preventDefaultを呼び出す必要があります。ただし、デフォルトの動作をドラッグで続行するには、最初のontouchstartでevent.preventDefaultを呼び出さないでください。一度preventDefaultが呼び出されると、そのジェスチャシーケンス中に（つまり、すべての指が外れるまで）デフォルトの動作を元に戻す方法はありません。何らかの動きが発生するまで、ドラッグは認識されません。

ドラッグは最も単純な例として示されていますが、ピンチとダブルタップのデフォルトの動作も気にしています。「画像のコピー」またはテキストの選択というデフォルトのMobileSafariPressの動作は必要ありません。

これまでの試み：

  • ontouchstartイベントを保存し、タイムアウト後、後で（Pressが認識される直前に）preventDefaultを呼び出します。無効。
  • ' oncontextmenu 'をリッスンします。いいえ、デフォルトのPress動作は、このイベントを介して通知またはルーティングされていません。
  • すべてのontouch*ハンドラーでデフォルトを防止し、ドラッグ/ピンチジェスチャを認識したら、initTouchEventまたはinitGestureEvent、あるいはその両方を使用して新しいイベントをシミュレートします。プログラムで作成されたイベントはすべてのコールバックにヒットしますが、Safariはそれらに注意を払っていないようで、デフォルトの動作をトリガーしません。
  • Safariのプレス認識を偽の動きで分割します。Safariはわずかな動きでプレスをキャンセルしますが、少し傾斜することはできます。ontouchstartの直後に（上記のように）移動イベントをシミュレートしても、Safariが認識に失敗することはありません。指が「実際に」動かされていない場合は、Pressを認識します。

AppleのネイティブiOSジェスチャレコグナイザーのスタイルで実装されたフル機能のジェスチャレコグナイザーのセット（Javascript、ontouch *）があります。ジェスチャの認識に問題は​​ありません。Safariが無料で提供するズーム/パン/ダブルタップの動作を再現するための良い方法がわかりません。

コードは必要ありません。私たちは、合理的な成功につながる理論的な解決策を探しています（「自分でパン/ズームを実装する」以外にも、興味のある巧妙な方法があれば）。私たちはまた、これを行うための他の同様の試みについて学ぶことに興味があります-確かに私たちはこれを最初に試したはずがありませんか？

代替TL;DR：タッチスタート以外でデフォルトのプレス（タップアンドホールドとも呼ばれます）を防ぐ方法はありますか？

4

2 に答える 2

19

成功：preventDefaultではなくCSSを介して「デフォルトのプレス」動作を完全に防止します。この回答は、SafariTechnologiesのエバンジェリストであるVickiMurleyによって提供されました（登録が必要です）

あなたのstackoverflowの投稿で、あなたの最終的な目標は次のとおりだと言っていることがわかります。

「「画像のコピー」またはテキストの選択というデフォルトのMobileSafariPressの動作は必要ありません。」

これらの動作はCSSで無効にすることができます（これらの他の動作をオフにしている場合、人々はハイライトをオフにしたいことが多いため、+ 1つのボーナスプロパティ）：

/* behavior */
-webkit-user-select: none;                /* disable cut copy paste */
-webkit-touch-callout: none;              /* disable callout, image save panel */
-webkit-tap-highlight-color: transparent; /* "turn off" link highlight */

解説：SafariのPressの動作は、CSSによって駆動されるのではなく、イベントベースであると想定しました。PreventDefault ontouchstartを呼び出すと、プレスの動作がキャンセルされますが（これが実際に私たちを迷わせた原因です）、それは意図しない副作用のようです。実際、MobileSafariは「CSSonpress」ほど「pressevent」を実行しません。

CSSでPressの動作を無効にすると、実際に必要な場所とときにのみ、preventDefaultを再度呼び出すことができます。

于 2011-03-30T21:38:24.457 に答える
0

醜い可能性：プレスを妨げないでください-デフォルトのプレスは何もしません。すべてのタッチをキャッチし、タッチスタートで何も妨げないガラスペインのdivを使用してみてください。

DivにはデフォルトのPress動作（ある種の選択）がありますが、preventDevaultではなく<body style="-webkit-user-select:none">？を介してオフにすることができます。ref

これは、認識されたイベントを渡すDOMノードを決定するために、独自のヒットテストを実行する必要があることを意味します。これは、イベントをDOMの祖先チェーンにバブルさせることはできないためです。

于 2011-03-30T20:24:25.680 に答える