此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

Element:setCapture() 方法

已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它,但也许已从相关的 web 标准中移除,也许正准备移除或出于兼容性而保留。请尽量不要使用该特性,并更新现有的代码;参见本页面底部的兼容性表格以指导你作出决定。请注意,该特性随时可能无法正常工作。

非标准: 该特性尚未标准化。我们不建议在生产环境中使用非标准特性,因为它们在浏览器中的支持有限,且可能发生变化或被移除。不过,在没有标准选项的特定情况下,它们可以作为合适的替代方案。

在处理 mousedown 事件的期间调用此方法以将所有的鼠标事件的目标都设置为该元素,直到释放鼠标按钮或者调用 document.releaseCapture()

警告:这个接口从未得到过很好的跨浏览器支持,你也许应使用 element.setPointerCapture(来自指针事件 API)代替。

语法

js
setCapture(retargetToElement) 

参数

retargetToElement

如果为 true,所有事件的目标都会被设置为这个元素;如果为 false,则事件也可以在这个元素的子元素上触发。

返回值

无(undefined)。

示例

在此示例中,当你在点中一个元素并且按住鼠标,然后再移动鼠标的时候,会显示鼠标的当前位置。

html
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>鼠标捕获示例</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 = "抱歉,当前浏览器似乎不支持 setCapture"; } } 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 = `位置:${e.clientX}, ${e.clientY}`; } </script> </head> <body onload="init()"> <p>这是一个关于如何在 Gecko 2.0 中针对元素使用鼠标捕捉的示例。</p> <p><a id="myButton" href="#">在这里测试</a></p> <div id="output">还没有任何事件</div> </body> </html> 

查看在线演示

备注

这个元素可能无法被完全滚动到顶部或底部,这取决于其他元素的布局。

规范

不属于任何规范。

浏览器兼容性

参见