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 の定義
勧告 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
releasePointerCaptureChrome 完全対応 55Edge 完全対応 12Firefox 完全対応 59
完全対応 59
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
完全対応 11
完全対応 10
接頭辞付き
接頭辞付き ms のベンダー接頭辞が必要
Opera 完全対応 42Safari 未対応 なしWebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 未対応 なし
未対応 なし
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 42Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報