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 July 2020.

setPointerCapture()Element インターフェイスのメソッドで、特定の要素をこれ以降のポインターイベントのキャプチャターゲットとして指定するために使用します。(Element.releasePointerCapture() を介して、または pointerup イベントが発生して)キャプチャが解放されるまで、それ以降のポインターのイベントはキャプチャ要素をターゲットにします。

メモ: ポインターキャプチャ設定後、それ以降のポインターイベントはキャプチャ対象の要素内で発生したとみなされます。よって、 pointeroverpointerenterpointerleavepointerout発生しません。 タッチ画面の機器などで直接操作をしているブラウザーでは、 pointerdown イベント発生時に要素に対してポインターキャプチャが自動的に適用されます。ポインターキャプチャの解放は element.releasePointerCapture メソッドを手動で呼び出したとき、または pointerup もしくは pointercancel イベント発生時に自動的に行われます。

ポインターキャプチャの概要

ポインターキャプチャでは、ポインターの位置にある通常 (またはヒットテスト) のターゲットではなく、特定のポインターイベント (PointerEvent) のイベントを特定の要素にターゲットしなおすことができます。 これは、ポインターデバイスの接触が要素から外れた場合でも、(スクロールやパンなどで)要素がポインターイベントを受信し続けるようにするために使用できます。

構文

js
setPointerCapture(pointerId)

引数

pointerId

PointerEvent オブジェクトの pointerId

返値

なし (undefined)。

例外

NotFoundError DOMException

pointerId がアクティブなポインターのいずれにも一致しなかった場合に発生します。

この例では、 <div> を押下するとポインターキャプチャが設定されます。これにより、ポインターをその境界の外側に移動した場合でも、要素を水平方向にスライドさせることができます。

HTML

html
<div id="slider">SLIDE ME</div>

CSS

css
div {
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbe;
}

JavaScript

js
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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
setPointerCapture

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報