【ポインターイベント】
ポインターイベント とは？
最終更新:
💡 マウス・指・ペンの入力を、共通の形で扱う
マウス・タッチ・ペンの入力を共通のイベントで扱うPointer Events。入力の識別、pointercancel、ポインターキャプチャと、CSSのpointer-eventsとの違いを解説します。
📌 このページのポイント
ひよこ ポインターイベントは、何をまとめる？
ペンギン先生 マウス、タッチ、ペンなどの入力を共通のイベントモデルで扱うよ。pointerdownで押し始め、pointermoveで移動、pointerupで離す操作などを受け取れる。入力方法ごとにすべて別の処理を書く負担を減らせるんだ。
ひよこ 指が二本あっても、区別できる？
ペンギン先生 pointerIdで、それぞれの入力を区別できるよ。pointerTypeではmouse・touch・penなどの種類も分かる。ただし、種類や追加情報がどこまで得られるかは、機器や環境による。すべての入力が同じ情報を持つわけではないんだ。
ひよこ ペンなら、筆圧も読める？
ペンギン先生 対応していればpressureで筆圧などの値を得られる。傾きや接触の大きさに関する情報もあるけれど、非対応の機器では代わりの値などになる。値があるだけで本物の筆圧が測れたと判断せず、必要な情報と対応を確認しよう。
ひよこ 最後は、必ずpointerupが来る？
ペンギン先生 ひよこ ドラッグして、要素の外へ出たら？
もっと詳しく知りたい人へ
CSSのpointer-events: noneは、同じAPI？
別の仕組みです。CSSのpointer-eventsは、要素がポインターイベントの対象になる条件を指定します。noneを指定しても、Tabキーでフォーカスできる場合があり、フォーム部品を無効にする処理の代わりにはなりません。
ポインターに対応したら、キーボードは不要？
不要にはなりません。ボタンなどはキーボードでも操作できるようにします。マウス用コードの名前を置き換えるだけでなく、複数入力、中断、ブラウザーの操作、キーボード対応まで含めて設計します。
まとめ：ざっくりこれだけ覚えればOK！
「ポインターイベント」って出てきたら「マウス・タッチ・ペンの入力を、共通の形で扱うイベント」と思えばだいたいOK！
📖 おまけ：英語の意味
「Pointer Events」 ＝ 画面の位置を指す操作のイベント
💬 入力方法の違いを共通のイベントモデルで扱います。キーボード操作まで、すべてポインター操作に置き換える仕組みではありません。