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";
}

查看实时示例

注意

根据其他元素的布局,该元素可能不会完全滚动到顶部或底部。

规范

不属于任何规范。

浏览器兼容性

另见