W3cubDocs

/Web APIs

Element: releasePointerCapture() method

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

js

releasePointerCapture(pointerId)

Parameters

pointerId

The pointerId of a PointerEvent object.

Return value

None (undefined).

Exceptions

NotFoundError DOMException

Thrown if pointerId does not match any active pointer.

Examples

This example sets pointer capture on a <div> when you press down on it. This lets you slide the element horizontally, even when your pointer moves outside of its boundaries.

HTML

html

<div id="slider">SLIDE ME</div>

CSS

css

div {
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbe;
}

JavaScript

js

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

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 1110 42 13 55 55 79 42 13 6.0

See also

© 2005–2023 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