Element: releasePointerCapture() method

{{APIRef("DOM")}}

The releasePointerCapture() method of the {{domxref("Element")}} interface releases (stops) pointer capture that was previously set for a specific ({{domxref("PointerEvent")}}) pointer.

Syntax

releasePointerCapture(pointerId)

Parameters

• pointerId
  • : The {{domxref("PointerEvent.pointerId", "pointerId")}} of a {{domxref("PointerEvent")}} object.

Return value

None ({{jsxref("undefined")}}).

Exceptions

• NotFoundError {{domxref("DOMException")}}
  • : Thrown if pointerId does not match any active pointer.

Examples

This example sets pointer capture on a {{HtmlElement("div")}} when you press down on it. This lets you slide the element horizontally, even when your 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: #ffbbee;
}

JavaScript

const slider = document.getElementById("slider");

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)`;
}

slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;

Result

{{EmbedLiveSample("Examples")}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{ domxref("Element.hasPointerCapture","Element.hasPointerCapture()") }}
• {{ domxref("Element.setPointerCapture","Element.setPointerCapture()") }}
• Pointer events