Element: releasePointerCapture() メソッド

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.

releasePointerCapture() は Element インターフェイスのメソッドで、特定の（PointerEvent の）ポインターに対して以前に設定されたポインターキャプチャを解放（停止）します。

ポインターキャプチャの説明と特定の要素に設定する方法については、Element.setPointerCapture() メソッドを参照してください。

構文

js
releasePointerCapture(pointerId)

引数

pointerId

PointerEvent オブジェクトの pointerId。

返値

なし (undefined)。

例外

例外 説明
InvalidPointerId pointerId がどのアクティブなポインターとも一致しない場合。

例

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

HTML

html
<div id="slider">スライドしてね</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-releasepointercapture

ブラウザーの互換性

BCD tables only load in the browser

関連情報