Element: releasePointerCapture() 方法

Baseline 已廣泛支援

此特性已經十分成熟,可在許多裝置和瀏覽器版本上使用。自 2020 年 7 月以來,它已在各大瀏覽器中可用。

Element 介面的 releasePointerCapture() 方法會釋放(停止)之前為特定(PointerEvent指標 設定的指標捕獲

語法

js
releasePointerCapture(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;
}

JavaScript

js
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-releasepointercapture

瀏覽器相容性

另見