.setCapture()

https://developer.mozilla.org/en-US/docs/Web/API/Element.setCapture

マウスボタンを離すか、document.releaseCapture()が呼び出されるまで、 mousedownイベント処理の間、このメソッドが呼び出され、全てのマウスイベントの対象をこの要素へ切り替えます。(翻訳に自信なし)

文法

element.setCapture(retargetToElement);

引数	説明
retargetToElement	trueの場合、全てのイベントがこの要素への直接の対象になります。 falseの場合、この要素の子孫でもイベントの発火が可能になります。

訳注: このメソッドは2014年8月現在、Webkit系のブラウザ(Chrome、Safari)ではElementに実装されていないようです。

例

この例では、要素上でマウスをクリックし、クリックしたままの状態を保持している間、マウスの座標位置を描画します。

<html>
<head>
  <title>Mouse Capture Example</title>
  <style type="text/css">
    #myButton {
      border: solid black 1px;
      color: black;
      padding: 2px;
      -moz-box-shadow:black 2px 2px;
    }
  </style>
</head>
<body>
  <p>これは、Geck 2.0で要素上でマウスキャプチャを行う例です。</p>
  <p><a id="myButton" href="javascript:buttonClicked()">ドラッグしてみてください。</a></p>
  <div id="output">イベントはまだありません</div>
  <script>
    function init() {
      var btn = document.getElementById("myButton");
      btn.addEventListener("mousedown", mouseDown, false);
      btn.addEventListener("mouseup", mouseUp, false);
    }

    function mouseDown(e) {
      e.target.setCapture();
      e.target.addEventListener("mousemove", mouseMoved, false);
    }

    function mouseUp(e) {
      e.target.removeEventListener("mousemove", mouseMoved, false);
    }

    function mouseMoved(e) {
      var output = document.getElementById("output");
      output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
    }

    //init処理実行
    init();
  </script>
</body>
</html>

注意事項

要素は他の要素のレイアウト状況に依って、上端または下端に完全にスクロールされない可能性があります。

仕様

標準的な仕様は定められていません。

.setCapture()

文法

例

注意事項

仕様

関連項目