Element: setPointerCapture() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年7月.
setPointerCapture() は Element インターフェイスのメソッドで、特定の要素をこれ以降のポインターイベントのキャプチャターゲットとして指定するために使用します。（Element.releasePointerCapture() を介して、または pointerup イベントが発生して）キャプチャが解放されるまで、それ以降のポインターのイベントはキャプチャ要素をターゲットにします。
メモ: ポインターキャプチャ設定後、それ以降のポインターイベントはキャプチャ対象の要素内で発生したとみなされます。よって、 pointerover、pointerenter、pointerleave、pointerout は発生しません。 タッチ画面の機器などで直接操作をしているブラウザーでは、 pointerdown イベント発生時に要素に対してポインターキャプチャが自動的に適用されます。ポインターキャプチャの解放は element.releasePointerCapture メソッドを手動で呼び出したとき、または pointerup もしくは pointercancel イベント発生時に自動的に行われます。
ポインターキャプチャの概要
ポインターキャプチャでは、ポインターの位置にある通常 (またはヒットテスト) のターゲットではなく、特定のポインターイベント (PointerEvent) のイベントを特定の要素にターゲットしなおすことができます。 これは、ポインターデバイスの接触が要素から外れた場合でも、（スクロールやパンなどで）要素がポインターイベントを受信し続けるようにするために使用できます。
構文
setPointerCapture(pointerId) 引数
pointerId-
PointerEventオブジェクトのpointerId。
返値
なし (undefined)。
例外
NotFoundErrorDOMException-
pointerIdがアクティブなポインターのいずれにも一致しなかった場合に発生します。
例
この例では、 <div> を押下するとポインターキャプチャが設定されます。これにより、ポインターをその境界の外側に移動した場合でも、要素を水平方向にスライドさせることができます。
HTML
<div id="slider">SLIDE ME</div> CSS
div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } JavaScript
function beginSliding(e) { slider.onpointermove = slide; slider.setPointerCapture(e.pointerId); } function stopSliding(e) { slider.onpointermove = null; slider.releasePointerCapture(e.pointerId); } function slide(e) { slider.style.transform = `translate(${e.clientX - 70}px)`; } const slider = document.getElementById("slider"); slider.onpointerdown = beginSliding; slider.onpointerup = stopSliding; 結果
仕様書
| Specification |
|---|
| Pointer Events # dom-element-setpointercapture |