Элемент: метод setPointerCapture()

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2020 года.

Метод setPointerCapture() интерфейса Element используется для обозначения конкретного элемента как целевой для захвата будущих событий указателя. Последующие события для указателя будут направляться на элемент захвата до тех пор, пока захват не будет отпущен (через Element.releasePointerCapture() или при возникновении события pointerup).

См. события указателя для обзора и примеров работы с захватом указателя.

Синтаксис

setPointerCapture(pointerId)

Параметры

pointerId: Идентификатор pointerId объекта PointerEvent.

Возвращаемое значение

None (undefined).

Исключения

NotFoundError DOMException: Выбрасывается, если pointerId не соответствует ни одному активному указателю.

Примеры

В этом примере устанавливается захват указателя для <div> при нажатии на него. Это позволяет перемещать элемент по горизонтали, даже если указатель выходит за его границы.

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;

Результат

Спецификации

Спецификация
Pointer Events # dom-element-setpointercapture

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`setPointerCapture`	55	12	59 До Firefox 82, `setPointerCapture()` выбрасывает `InvalidPointerId` для недопустимого аргумента `pointerId`. С Firefox 82 выбрасывается указанное исключение `NotFoundError`. См. баг 1662124.	42	13	55	79 До Firefox 82, `setPointerCapture()` выбрасывает `InvalidPointerId` для недопустимого аргумента `pointerId`. С Firefox 82 выбрасывается указанное исключение `NotFoundError`. См. баг 1662124.	42	13	6.0	55

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture