Element: releasePointerCapture() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

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

Syntax

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

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

BCD tables only load in the browser