元素: setCapture() 方法
已弃用: 不再推荐使用此功能。虽然某些浏览器可能仍然支持它,但它可能已从相关 Web 标准中删除,可能正在被删除,或者可能仅出于兼容性目的而保留。避免使用它,并尽可能更新现有代码;请参阅本页底部的兼容性表 以指导您的决定。请注意,此功能可能随时停止工作。
非标准: 此功能是非标准的,也不在标准轨道上。请勿在面向 Web 的生产网站上使用它:它不会适用于所有用户。实现之间也可能存在很大差异,并且行为在将来可能会发生变化。
在处理 mousedown 事件期间调用此方法,以将所有鼠标事件重新定位到此元素,直到鼠标按钮释放或调用document.releaseCapture()
为止。
警告: 此接口从未获得过跨浏览器支持,您可能正在寻找element.setPointerCapture
而不是它,来自指针事件 API。
语法
js
setCapture(retargetToElement)
参数
retargetToElement
-
如果
true
,所有事件都将直接针对此元素;如果false
,事件也可以在该元素的后代处触发。
返回值
无 (undefined
).
示例
在此示例中,在您点击并按住某个元素后,鼠标在周围移动时,将绘制当前鼠标坐标。
html
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Mouse Capture Example</title>
<style>
#myButton {
border: solid black 1px;
color: black;
padding: 2px;
box-shadow: black 2px 2px;
}
</style>
<script>
function init() {
const btn = document.getElementById("myButton");
if (btn.setCapture) {
btn.addEventListener("mousedown", mouseDown, false);
btn.addEventListener("mouseup", mouseUp, false);
} else {
document.getElementById("output").textContent =
"Sorry, there appears to be no setCapture support on this browser";
}
}
function mouseDown(e) {
e.target.setCapture();
e.target.addEventListener("mousemove", mouseMoved, false);
}
function mouseUp(e) {
e.target.removeEventListener("mousemove", mouseMoved, false);
}
function mouseMoved(e) {
const output = document.getElementById("output");
output.textContent = `Position: ${e.clientX}, ${e.clientY}`;
}
</script>
</head>
<body onload="init()">
<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>
</body>
</html>
备注
元素可能不会完全滚动到顶部或底部,具体取决于其他元素的布局。
规范
不属于任何规范。
浏览器兼容性
BCD 表格仅在浏览器中加载