知名度が低いウェブ標準ひとり Advent Calendar 2021 – 05 日目
マウス系イベントとタッチ系イベントを統合して拡張した Pointer Events というのがあります。
かつては mousemove と touchmove の両方のイベントでほとんど同じだけどちょっとだけ違うみたいなコードを書いてたんだけど、これを使うと一度書けば両方に対応できます。
なお CSS の pointer-events とは無関係。
基本的な使い方
こんな感じでイベントを置き換えられます。
| マウス系 | タッチ系 | ポインター系 |
|---|---|---|
mousedown |
touchstart |
pointerstart |
mousemove |
touchmove |
pointermove |
mouseup |
touchend |
pointerend |
| - | touchcancel |
pointercancel |
mouseenter |
– | pointerenter |
mouseleave |
– | pointerleave |
あとプロパティ。
| マウス系 | タッチ系 | ポインター系 |
|---|---|---|
button |
– | button |
| - | touches |
touchId |
pageX 他 |
pageX 他 |
pageX 他（そのまま） |
イベントオブジェクト
PointerEvent コンストラクターは MouseEvent コンストラクターを継承しているので、飛んでくる event では button とかマウス系イベントのイベントオブジェクトと同じプロパティは全て使えます。しれっと pageX 等の座標系が倍精度になっていたりはする。
タッチは touches の代わりに pointerId で識別する感じです。ポインターごとにイベントが発火します。デモでは ID を表示したりしてるので見てみてください。
拡張
マウス系にもタッチ系にもない独自のものとして、pointerType というプロパティが追加されています。これを見てどの種類の装置による操作なのかを判断できます。値は文字列 (DOMString) で "mouse" 、 "touch" 及び "pen" になります。
そう、"pen" 。というわけでマウス、タッチの他にペンの操作を受け付けることができます。ペン用のプロパティとして、筆圧 pressure や傾き tiltX なども得られます。
おしまい
たしか Windows 8 で OS ごとタッチ対応したあたりで追加された機能だったと思う。なので IE も対応してます。
ちなみにドラッグ UI 作るだけの場合は draggable="true" 属性と drag イベント使う方が楽かも。