Element.setPointerCapture()

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

ポインターキャプチャを設定している場合、 pointerover, pointerout, pointerenter, pointerleave のイベントはキャプチャターゲットの境界を横断したときにのみ生成されます。これは他のすべての要素でこれらのイベントを抑制する効果があります。

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

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

構文

targetElement.setPointerCapture(pointerId);

引数

pointerId: PointerEvent オブジェクトの pointerId。

返値

このメソッドは undefined を返します。

例外

例外	説明
`InvalidPointerId`	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;

結果

仕様書

仕様書	状態	備考
Pointer Events – Level 2 setPointerCapture の定義	勧告	不安定版
Pointer Events setPointerCapture の定義	廃止	初回定義

ブラウザーの互換性

BCD tables only load in the browser