Element.setPointerCapture()

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

ポインターキャプチャを設定している場合、 pointerover, pointerout, pointerenter, pointerleave のイベントはキャプチャターゲットの境界を横断したときにのみ生成されます。これは他のすべての要素でこれらのイベントを抑制する効果があります。

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

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

構文

targetElement.setPointerCapture(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
setPointerCapture の定義
勧告 不安定版
Pointer Events
setPointerCapture の定義
廃止された 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
setPointerCaptureChrome 完全対応 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 完全対応 13WebView 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 完全対応 13Samsung Internet Android 完全対応 6.0

凡例

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

関連情報