マウスでは動くのに、スマートフォンではキャラクターが止まらない。押す・動かす・離すに加え、入力が中断される場面を扱うことが大切です。
この記事でわかること
- 押した指やポインターを区別する
- 離すイベント以外にも終了処理を用意する
- スクロールとの競合を操作領域で調整する
入力は「押した」だけでは終わらない
移動を始めたら、どの入力で始まったかも記録します。複数の指が画面に触れたとき、別の指を離すことで移動が止まる設計になっていないかを点検します。
Pointer Eventsはマウス・ペン・タッチを共通の仕組みで扱えます。入力方式をまとめても、同時入力やブラウザによる操作中断への対応は別に必要です。
中断した入力を、必ず片づける
ブラウザが操作をスクロールなどに使うと、pointercancelが発生する場合があります。通常の終了処理と中断時の処理を共通化し、押下状態やドラッグ対象が残らないようにします。
ポインターキャプチャを利用すると、対象の外へ動いた入力を扱いやすくなります。ただし、キャプチャが失われる場面も含め、最終的に停止状態へ戻せることを確認します。
テストする場所を、画面の端まで広げる
画面中央で指を離す試験だけでは、中断に関する不具合を見つけにくくなります。操作領域の外へ指を動かす、二本の指を交互に離す、といった手順を残して確認しましょう。
- ドラッグ中に領域の外へ出る
- 二本目の指を置いてから一本目を離す
- 操作中にタブを切り替える
- ゲーム外の文章はスクロールできるかを見る
参考にした情報源
情報確認日：2026.10.14。引用画像・投稿の埋め込みは使用していません。