Element.setPointerCapture()

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

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

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

構文

targetElement.setPointerCapture(pointerId);

パラメーター

pointerId

PointerEvent オブジェクトの pointerId。

戻り値

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

例外

例

この例では、<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;

結果

仕様

ブラウザーの互換性

関連情報

• Element.releasePointerCapture
• Pointer Events