pointer event

What is the use of setPointerCapture and releasePointerCapture and also how to use it

5 Replies

Instead of trying to explain it, think this does a better job. and it has an example https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture basically it makes sure the event is still active, even when you dont hover the targetted element anymore.

MDN Web Docs

Element: setPointerCapture() method - Web APIs | MDN

The setPointerCapture() method of the Element interface is used to designate a specific element as the capture target of future pointer events. Subsequent events for the pointer will be targeted at the capture element until capture is released (via Element.releasePointerCapture() or the pointerup event is fired).

reddogg476•8mo ago

This portion (from the above link) describes the function in simple terms than a definition dump.

function beginSliding(e) {
  slider.onpointermove = slide;
  slider.setPointerCapture(e.pointerId);
}

function stopSliding(e) {
  slider.onpointermove = null;
  slider.releasePointerCapture(e.pointerId);
}

function beginSliding(e) {
  slider.onpointermove = slide;
  slider.setPointerCapture(e.pointerId);
}

function stopSliding(e) {
  slider.onpointermove = null;
  slider.releasePointerCapture(e.pointerId);
}

What this function is doing is allowing the slider to work based on the pointer capture element, specified in the method's call parameter. The pointerId is a given property for a pointer event and it's a number. So the number of the pointer event is what is triggering the set and release capture points.

Abrar(watching bleach 🗿)•8mo ago

But sir i still don't understand about setPointerCapture,mdn's explanation doesn't really make sense What this setPointerCapture do

Jochem•8mo ago

when you call setPointerCapture in an onmousedown event, it will make sure that all future mouse events get routed to the event handlers on that element until you call releasePointerCapture basically, it means that when you mousedown on something to pick it up in a drag/drop scenario, you can make sure that the mouseup fires on the same element so that even if it's hidden behind something, or your mouse is over a child, or it's been restrained somewhere and the mouse isn't on it anymore, the onmouseup will still trigger on the element and not some random part of the DOM it's also a pretty advanced feature though, you won't need it very often

Abrar(watching bleach 🗿)•8mo ago

Thanks for the explanation sir

Gaming

Programming

pointer event