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 の定義 |
廃止 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser