DOM

この例は <p> 要素を取得し、gotpointercapture イベントを待ち受けします。setPointerCapture() を pointerdown イベントの要素上で呼び出し、gotpointercapture を発生させます。

const para = document.querySelector('p');

document.addEventListener('gotpointercapture', () => {
  console.log('I\'ve been captured!')
});

para.addEventListener('pointerdown', (event) => {
  para.setPointerCapture(event.pointerId);
});

同じ例：

const para = document.querySelector('p');

document.ongotpointercapture = () => {
  console.log('I\'ve been captured!')
};

para.addEventListener('pointerdown', (event) => {
  para.setPointerCapture(event.pointerId);
});

HTML：

<SPAN id=IdTest>[ここでマウスを…]</SPAN><BR>
<SPAN id=IdLog></SPAN>

JavaScript：

function JobPD(eve){ //pointerdownイベントの処理：ボタンオンして時間が経ってからボタンオフしても起こった。
  D=eve; //＝[object]：[object PointerEvent]。要素でクリックした。
詳細
	//isTrusted＝[boolean]：true
	//pointerId＝[number]：1
	//width＝[number]：1
	//height＝[number]：1
	//pressure＝[number]：0.5
	//tiltX＝[number]：0
	//tiltY＝[number]：0
	//azimuthAngle＝[number]：0
	//altitudeAngle＝[number]：1.5707963267948966
	//tangentialPressure＝[number]：0
	//twist＝[number]：0
	//pointerType＝[string]：mouse
	//isPrimary＝[boolean]：true
	//getCoalescedEvents＝[function]：function getCoalescedEvents() { [native code] }
	//getPredictedEvents＝[function]：function getPredictedEvents() { [native code] }
	//screenX＝[number]：371
	//screenY＝[number]：284
	//clientX＝[number]：164.5625
	//clientY＝[number]：209
	//ctrlKey＝[boolean]：false
	//shiftKey＝[boolean]：false
	//altKey＝[boolean]：false
	//metaKey＝[boolean]：false
	//button＝[number]：0
	//buttons＝[number]：1
	//relatedTarget＝[object]：null
	//pageX＝[number]：164.5625
	//pageY＝[number]：1798
	//x＝[number]：164.5625
	//y＝[number]：209
	//offsetX＝[number]：145.671875
	//offsetY＝[number]：180.25
	//movementX＝[number]：0
	//movementY＝[number]：0
	//fromElement＝[object]：null
	//toElement＝[object]：null
	//layerX＝[number]：164
	//layerY＝[number]：1798
	//…

  IdTest.setPointerCapture(eve.pointerId); //ポインターキャプチャー。
}
function Job(eve){ //gotpointercaptureイベントの処理：
  DA=eve; //＝[object]：[object PointerEvent]
詳細
	//isTrusted＝[boolean]：true
	//pointerId＝[number]：1
	//width＝[number]：1
	//height＝[number]：1
	//pressure＝[number]：0.5
	//tiltX＝[number]：0
	//tiltY＝[number]：0
	//azimuthAngle＝[number]：0
	//altitudeAngle＝[number]：1.5707963267948966
	//tangentialPressure＝[number]：0
	//twist＝[number]：0
	//pointerType＝[string]：mouse
	//isPrimary＝[boolean]：true
	//getCoalescedEvents＝[function]：function getCoalescedEvents() { [native code] }
	//getPredictedEvents＝[function]：function getPredictedEvents() { [native code] }
	//screenX＝[number]：340
	//screenY＝[number]：285
	//clientX＝[number]：133.5625
	//clientY＝[number]：210
	//ctrlKey＝[boolean]：false
	//shiftKey＝[boolean]：false
	//altKey＝[boolean]：false
	//metaKey＝[boolean]：false
	//button＝[number]：-1
	//buttons＝[number]：1
	//relatedTarget＝[object]：null
	//pageX＝[number]：133.5625
	//pageY＝[number]：1911
	//x＝[number]：133.5625
	//y＝[number]：210
	//offsetX＝[number]：114.671875
	//offsetY＝[number]：34.25
	//movementX＝[number]：0
	//movementY＝[number]：0
	//fromElement＝[object]：null
	//toElement＝[object]：null
	//layerX＝[number]：133
	//layerY＝[number]：1911
	//getModifierState＝[function]：function getModifierState() { [native code] }
	//initMouseEvent＝[function]：function initMouseEvent() { [native code] }
	//view＝[object]：[object Window]
	//detail＝[number]：0
	//sourceCapabilities＝[object]：null
	//which＝[number]：0
	//initUIEvent＝[function]：function initUIEvent() { [native code] }
	//type＝[string]：gotpointercapture
	//target＝[object]：[object HTMLSpanElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：true
	//cancelable＝[boolean]：false
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：true
	//…

  IdLog.innerHTML=IdLog.innerHTML+"●"; //表示。
}
IdTest.onpointerdown=JobPD;       //イベントの割り当て。
IdTest.ongotpointercapture=Job; //イベントの割り当て。

→Element.setPointerCapture()。pointerdown。