Element.setPointerCapture()

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

备注： 一旦设置了 pointer capture，pointerover、pointerout、pointerenter 和 pointerleave 事件将不会被触发，直到越过设置了 capture 的元素的边界。这是因为其他元素将不能再作为 pointer 事件的目标了。这会影响到这些事件在其他元素上的触发。

指针捕获概述

指针捕获允许一个特定的指针事件 (PointerEvent) 事件从一个事件触发时候的目标重定位到另一个目标上。这个功能可以确保一个元素可以持续的接收到一个 pointer 事件，即使这个事件的触发点已经移出了这个元素（比如，在滚动的时候）。

语法

js
setPointerCapture(pointerId)

参数

pointerId

PointerEvent 对象的pointerId 。

返回值

返回 void。如果pointerId不匹配任何当前活动的指针事件，将抛出DOMException。

示例

当你按下它时，此示例在 <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;

结果

规范

Specification
Pointer Events
# dom-element-setpointercapture

浏览器兼容性

BCD tables only load in the browser

参见