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 2020年7月.
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 |
ブラウザーの互換性
Loading…