DOM

：

：

Element.setPointerCapture() メソッド

　編集：2022.09.25 by T.A.

[Edge]。→、、

targetElement を指定のポインター イベントでキャプチャ ターゲットとして設定します。

mdn： 特定の要素をこれ以降のポインター イベントのキャプチャ ターゲットとして指定するために使用します。

Element.releasePointerCapture() によりキャプチャが解放されるまで、それ以降のポインターのイベントはキャプチャ要素をターゲットにします。

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

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

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

構文
targetElement.setPointerCapture(pointerId)
element Element オブジェクト。
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;

HTML： 

<DIV id=IdTest style="background-color:#fdd; width:100px">DIV要素</DIV>

JavaScript： 

function JobStart(eve){     //ポインターが押された時のイベント処理：eveにはイベントオブジェクトが入る。
  IdTest.onpointermove=Job; //ポインターが動いた時の処理を割り当てる。
  IdTest.setPointerCapture(eve.pointerId); //ポインター キャプチャーの設定？
}
function JobEnd(eve){        //ポインターが放された時のイベント処理：
  IdTest.onpointermove=null; //ポインターが動いた時の処理を外す。
  IdTest.releasePointerCapture(eve.pointerId); //ポインター キャプチャーの解放。
}
function Job(eve){  //ポインターが動いた時のイベント処理：
  IdTest.style.transform="translate("+(eve.clientX-80)+"px"; //要素を移動させる。
}
IdTest.onpointerdown=JobStart; //ポインターが押された時のイベント処理の割り当て。
IdTest.onpointerup=JobEnd;     //ポインターが放された時のイベント処理の割り当て。

→pointermove、releasePointerCapture()、pointerId、pointerdown、pointerup。

→transform、translate()。

テスト