More than 1 year has passed since last update.

JavaScript ポインターイベントで、マウスとタッチに楽に両対応

Last updated at 2025-04-06Posted at 2025-04-06

ポインターイベントとは？

JavaScriptで、ドラッグ操作などをPCとモバイルに両対応したいときがあります。私は今まで、MouseEventとTouchEventをどちらも登録していましたが、かなりめんどくさい。
そこで役に立つのが、ポインターイベントです。

ポインターイベントは、マウスイベントと対応するようなイベントが存在します。

(mousedownに対してpointerdown
mousemoveに対してpointermove
mouseupに対してpointerup)
例えば、ドラッグの移動量を検出したい場合は、

element.addEventListener('pointermove', e => {
  e.movementX // 直前からの移動量X
  e.movementY // 直前からの移動量Y
})

このイベント1つで、マウスとタッチに両対応することができます。
リスナーで受け取るイベントeは、MouseEventを継承しているので、マウスイベントからの移行は簡単です。
さらに、movementXとmovementYを一発で取れるのはとても便利です。

Mozillaのドキュメントを見ると

警告: ブラウザーはmovementXとscreenXに仕様で定義されているものとは異なる単位を使用します。ブラウザーとオペレーティングシステムによって、movementXの単位は物理ピクセルであったり、論理ピクセルであったり、 CSS ピクセルであったりします。

と書いてあります...。これはマズいやつや。

具体的なブラウザごとの使用単位は、

Edge:    物理ピクセル
Chrome:  物理ピクセル
Firefox: CSSピクセル
Safari:  論理ピクセル

とのこと。これでは、想定していた移動量とスケールがズレてしまいそう。これは使えない...。
やはり、直前の座標を保存して、移動量を自分で算出するのがベストなようです。

ポインターイベントは、それぞれのポインターに対して発火します。
例えば、3本指でドラッグした時は、pointermoveが3回ダブってしまいます。
モバイルで個別の対応が必要になることもあるかもしれません。

主要ブラウザは、2020年には全て対応したみたいです。安心して使えそうです。