知名度が低いウェブ標準ひとり Advent Calendar 2021 – 15 日目

今日は setPointerCapture() です。ドラッグ UI を実装するときめっちゃ楽になります。

基本的な使い方

pointerdown といった Pointer Events 系で使います。

el.setPointerCapture(event.pointerId);

使い終わったら開放します。

el.releasePointerCapture(event.pointerId);

ちなみにそれぞれ gotpointercapture と lostpointercapture イベントが発火します。

何が嬉しいか

mousemove イベントを使って自前でドラッグを作ってみると直面すると思うんですが、このイベントって対象要素上でマウスカーソルを動かしたときにだけ反応しますね。

経験ない人からすると何当たり前のこと言ってんだって感じだと思うんですけど、こんなときに困るんです。

  • マウスカーソルを素早く操作して対象要素の外へ出てしまう
  • デザインの都合上、重なり手前に表示される要素がある

デモで右端を掴んで右側へドラッグしてみてください。たぶん止まります。カーソルを戻して、ゆっくり、はみ出ないよう少しずつ動かすとドラッグできます。

対処としては対象要素じゃなくて document の方で mousemove を見張るって感じでしょうか。直感的ではありませんし、開放処理の漏れとかありそうで怖いです。

そこで setPointerCapture() です。これを使うとポインターを「捕獲」して mousemove 代わりの pointermove イベントが対象要素で発火するようになります。もうカーソルがはみ出しても安心です。

おしまい

というわけで Pointer Events は便利って話でした。