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 上檢視此頁面 • 報告此內容的錯誤