Element: setCapture() メソッド

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

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

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 tables only load in the browser

関連情報