【JavaScript】pointermoveがタッチ操作でうまく動かない原因と解決方法

Posted at 2025-03-10

Webアプリを作っていたときに、Pointerイベントのpointermoveがうまく動かなかったので、その時の原因と解決方法を紹介します。

環境

Windows11のタブレットPCで操作したとき（スマホでは未確認）
ブラウザはMicrosoft Edge

pointermoveはaddEventListenerでやってました

タッチでスワイプ操作すると、ページをスクロールする操作になってしまい、pointermoveが反応しなくなってしまうのが原因でした。
（CSSでoverflow: hiddenを使っていたので気づかなかった）

CSSでtouch-actionを使って、要素をスワイプしてもスクロールする操作にならないようにします。

css

{
    touch-action: none;
    
    /*これで、この要素をスワイプしてもスクロールの操作にならなくなります*/
}