Element.releasePointerCapture()
The releasePointerCapture() method of the Element interface releases (stops) pointer capture that was previously set for a specific (PointerEvent) pointer.
See the Element.setPointerCapture() method for a description of pointer capture and how to set it for a particular element.
Syntax
targetElement.releasePointerCapture(pointerId);
Parameters
pointerId-
The
pointerIdof aPointerEventobject.
Return value
This method returns undefined.
Exceptions
| Exception | Explanation |
|---|---|
InvalidPointerId | pointerId does not match any of the active pointers. |
Example
This example sets pointer capture on a <div> when you press down on it. This lets you slide the element horizontally, even when you pointer moves outside of its boundaries.
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;
Result
Specifications
| Specification |
|---|
| Pointer Events # dom-element-releasepointercapture |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
releasePointerCapture |
55 |
12 |
59
41
|
11
10
|
42 |
13 |
55 |
55 |
79
41
|
42 |
13 |
6.0 |
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture