From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/element/setcapture/index.html | 94 ++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 files/ja/web/api/element/setcapture/index.html (limited to 'files/ja/web/api/element/setcapture') diff --git a/files/ja/web/api/element/setcapture/index.html b/files/ja/web/api/element/setcapture/index.html new file mode 100644 index 0000000000..8a195b679a --- /dev/null +++ b/files/ja/web/api/element/setcapture/index.html @@ -0,0 +1,94 @@ +--- +title: Element.setCapture() +slug: Web/API/Element/setCapture +translation_of: Web/API/Element/setCapture +--- +

{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}

+ +

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

+ +
Warning: このインターフェースにはブラウザ間のサポートはほとんどありませんでした。代わりに、Pointer Events APIから{{domxref("element.setPointerCapture")}}を探していました。
+ +

シンタックス

+ +
element.setCapture(retargetToElement);
+
+ +
+
retargetToElement
+
trueの場合、すべてのイベントはこの要素を直接対象とします。falseの場合、イベントはこの要素の子孫でも発生する可能性があります。
+
+ +

例

+ +

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

+ +
<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() {
+      var btn = document.getElementById("myButton");
+      if (btn.setCapture) {
+        btn.addEventListener("mousedown", mouseDown, false);
+        btn.addEventListener("mouseup", mouseUp, false);
+      } else {
+        document.getElementById("output").innerHTML
+          = "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) {
+      var output = document.getElementById("output");
+      output.innerHTML = "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>
+
+ +

查看在线演示

+ +

注意

+ +

要素は、他の要素のレイアウトに応じて、上または下に完全にスクロールすることはできません。

+ +

指定

+ +

Internet Explorerの実装に基づいています。

+ +

ブラウザの互換性

+ + + +

{{Compat("api.Element.setCapture")}}

+ +

関連資料

+ + -- cgit v1.2.3-54-g00ecf