デフォルトとポインタの移動がポインタ移動で機能しない

Question

私はHTML5の中に描画するアプリを作っていますcanvasですが、モバイルやタブレットからはできません。

を押し下げたときに、私はあなたがそれを見ることができますので、私はjsfiddleで例を作成しているブラウザのネイティブのスクロールやクロムのリフレッシュを避けることができません。

Answer 1

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

touch-actionは、HTML要素がジェスチャーに応答するかどうか、また、どのように応答するかを指定します。 touch-action: noneでは、UAの動作がトリガーされません（ドラッグやズームなど）。既定のプロパティはtouch-action: autoで、すべてのUA動作がトリガされます。

Answer 2

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

touch-actionを「none」に設定した場合、ネイティブブラウザの処理は決して実行されません。逆に、あなたが報告したように、デフォルトの "auto"に相当するタッチアクション設定がないと、ChromeはpointerMoveのpreventDefault（）への呼び出しを無視し、まだpointerCancelを呼び出すので動作しません。

代わりにpassive：falseフラグを使用してtouchMoveのリスナーを追加した場合、preventDefault（）はtouchCancelを回避して正常に動作することに注意してください。ただし、マウスイベントとタッチイベントリスナを別々に使用する必要があります。これは、ポインタイベントを使用して回避しようとしているものです。