Element: setCapture() 方法

已棄用:此特性不再推薦。雖然某些瀏覽器可能仍然支援它,但它可能已經從相關的網路標準中刪除,可能正在刪除過程中,或者可能僅為相容性目的而保留。請避免使用它,如果可能,請更新現有程式碼;請參閱本頁底部的相容性表格以指導您的決策。請注意,此特性可能隨時停止工作。

非標準:此特性未標準化。我們不建議在生產環境中使用非標準特性,因為它們瀏覽器支援有限,並且可能會更改或被移除。但是,在沒有標準選項的特定情況下,它們可以是合適的替代方案。

在處理 `mousedown` 事件時呼叫此方法,可以將所有滑鼠事件重新定向到此元素,直到滑鼠按鈕釋放或呼叫 document.releaseCapture()

警告: 此介面的跨瀏覽器支援一直不佳,您可能更想使用 Pointer Events API 中的 element.setPointerCapture

語法

js
setCapture(retargetToElement)

引數

retargetToElement

如果為 true,則所有事件都直接定向到此元素;如果為 false,則事件也可以在子元素上觸發。

返回值

無(undefined)。

示例

在此示例中,在單擊並按住元素後,滑鼠移動時會繪製當前滑鼠座標。

html
<p>This is an example of how to use mouse capture on elements in Gecko 2.0.</p>
<p><a id="myButton" href="#">Test Me</a></p>
<div id="output">No events yet</div>
css
#myButton {
  border: solid black 1px;
  color: black;
  padding: 2px;
  box-shadow: black 2px 2px;
}
js
function mouseDown(e) {
  e.target.setCapture();
  e.target.addEventListener("mousemove", mouseMoved);
}

function mouseUp(e) {
  e.target.removeEventListener("mousemove", mouseMoved);
}

function mouseMoved(e) {
  const output = document.getElementById("output");
  output.textContent = `Position: ${e.clientX}, ${e.clientY}`;
}

const btn = document.getElementById("myButton");
if (btn.setCapture) {
  btn.addEventListener("mousedown", mouseDown);
  btn.addEventListener("mouseup", mouseUp);
} else {
  document.getElementById("output").textContent =
    "Sorry, there appears to be no setCapture support on this browser";
}

檢視即時示例

注意

根據其他元素的佈局,該元素可能不會完全滾動到頂部或底部。

規範

不屬於任何規範。

瀏覽器相容性

另見