DOM

：

：

Element.setCapture() メソッド

　編集：2022.09.25 by T.A.

[Edge]⛌。非標準 非推奨。→

非推奨： この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

非標準： この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

element のイベント処理中にこのメソッドを呼び出されると document.releaseCapture() が呼び出されるまでイベントを補足します。

mdn： mousedown イベントの処理中にこのメソッドを呼び出すと、マウスボタンが離されるか document.releaseCapture() が呼び出されるまで、この要素にすべてのマウスイベントを捕捉します。

Warning： このインターフェイスにはブラウザー間の対応がほとんどありませんでした。おそらくお探しのものは element.setPointerCapture()（ポインターイベント API）でしょう。

構文
element.setCapture(retargetToElement)
Element Element。
retargetToElement 真偽値。true ならば、すべてのイベントはこの要素に直接向けられます。false ならばイベントはこの要素の子孫にも発行されることがあります。
戻り値

なし（undefined）。

例

現在のマウスの座標が、要素をクリックして押した後にマウスを移動しながら描画されます。 

<html>
<head>
  <title>Mouse Capture Example</title>
  <style type="text/css">
    #myButton {
      border: solid black 1px;
      color: black;
      padding: 2px;
      box-shadow: black 2px 2px;
    }
  </style>

  <script type="text/javascript">
    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>
テスト