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

releasePointerCapture(pointerId)

Parameters

pointerId: The pointerId of a PointerEvent object.

Return value

This method returns undefined.

Exceptions

Exception	Explanation
`InvalidPointerId`	pointerId does not match any of the active pointers.

Examples

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

Name	Web APIs
Version
Badge
Last Updated	2022-04-27T09:33:08Z