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>

查看在线演示

备注

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

规范

不属于任何规范。

浏览器兼容性

参见