Element: setPointerCapture() 方法

Baseline 已广泛支持

此特性已经十分成熟，可在许多设备和浏览器版本上使用。自 2020 年 7 月以来，它已在各大浏览器中可用。

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

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

语法

setPointerCapture(pointerId)

参数

pointerId: PointerEvent 对象的 pointerId。

返回值

无（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: #ffbbee;
  touch-action: none;
}

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;

结果

规范

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年10月1日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的错误