元素: 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 表格仅在浏览器中加载

另请参阅