Element.releasePointerCapture()
Element
インターフェイスの releasePointerCapture()
メソッドは、特定の(PointerEvent
)ポインタに対して以前に設定されたポインタキャプチャを解放(停止)します。
ポインタキャプチャの説明と特定の要素に設定する方法については、Element.setPointerCapture()
メソッドを参照してください。
構文
targetElement.releasePointerCapture(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 releasePointerCapture の定義 |
勧告 | 不安定版 |
Pointer Events releasePointerCapture の定義 |
廃止 | 初期定義 |
ブラウザーの互換性
BCD tables only load in the browser