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>

查看在线演示

备注

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

规范

不属于任何规范。

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
setCapture
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.

参见