1

HTML5 内に描画するアプリを作成してcanvasいますが、モバイルまたはタブレットからはできません。

ブラウザのネイティブ スクロールや、プッシュ ダウン時の chrome の更新が避けられない

jsfiddleで例を作成したので、それを見ることができます。

4

2 に答える 2

4

これは本物の Chrome バグのようです。サンプル コードを使用して報告します。独自のコードで pointerMove を処理するか、ネイティブ ブラウザの処理を許可するかを JavaScript で動的に決定したい場合、CSS で touch-action を設定することは解決策ではありません。

touch-action: "none" を設定すると、ネイティブ ブラウザの処理は実行されません。逆に、あなたが報告したように、デフォルトの「自動」に相当するタッチアクション設定がない場合、Chrome は pointerMove での preventDefault() の呼び出しを無視し、引き続き pointerCancel を呼び出すため、機能しません - バグ。

代わりに、passive: false フラグを使用して touchMove のリスナーを追加した場合、preventDefault() は期待どおりに機能し、touchCancel を回避することに注意してください。ただし、別のマウス イベント リスナーとタッチ イベント リスナーを使用する必要があります。これは、ポインター イベントを使用して回避しようとしていることです。

于 2017-12-28T07:02:24.540 に答える
3

touch-action: noneデフォルトの UA の動作を抑制するには、キャンバス要素にCSS プロパティを追加する必要があります。

touch-actionHTML 要素がジェスチャに応答するかどうか、およびその方法を指定します。touch-action: noneUA 動作がトリガーされない場合 (ドラッグやズームなど) 。デフォルトのプロパティはtouch-action: autoで、すべての UA の動作をトリガーできます。

于 2017-01-04T17:51:26.970 に答える