元素：setPointerCapture() 方法

setPointerCapture() 是 Element 接口的方法，用于指定某个特定元素作为未来指针事件的捕获目标。后续针对该指针的事件将被定向到捕获元素，直到捕获被释放（通过 Element.releasePointerCapture() 或 pointerup 事件触发）。

请参阅 指针事件 以获取指针捕获的工作原理概述和示例。

语法

js
setPointerCapture(pointerId)

参数

pointerId

pointerId 是 PointerEvent 对象的一个属性。

返回值

无 (undefined).

异常

NotFoundError DOMException

如果pointerId与任何活动指针不匹配，则抛出此错误。

示例

此示例在您按下 <div> 元素时，在其上设置指针捕获。这样，即使您的指针移动到其边界之外，您也可以水平滑动该元素。

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;

结果

规范

规范
指针事件
# dom-element-setpointercapture

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅