Element.setPointerCapture()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

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

参见