From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 files/zh-cn/web/api/element/setcapture/index.html | 82 +++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 files/zh-cn/web/api/element/setcapture/index.html

(limited to 'files/zh-cn/web/api/element/setcapture')

diff --git a/files/zh-cn/web/api/element/setcapture/index.html b/files/zh-cn/web/api/element/setcapture/index.html
new file mode 100644
index 0000000000..26d035a813
--- /dev/null
+++ b/files/zh-cn/web/api/element/setcapture/index.html
@@ -0,0 +1,82 @@
+---
+title: element.setCapture
+slug: Web/API/Element/setCapture
+translation_of: Web/API/Element/setCapture
+---
+<p>{{ ApiRef() }}{{ gecko_minversion_header("2.0") }}</p>
+
+<h3 id="Summary" name="Summary">概要</h3>
+
+<p>在处理一个 mousedown 事件过程中调用这个方法来把全部的鼠标事件重新定向到这个元素，直到鼠标按钮被释放或者 {{ domxref("document.releaseCapture()") }} 被调用。</p>
+
+<h3 id="Syntax" name="Syntax">语法</h3>
+
+<pre class="eval">element.setCapture(<em>retargetToElement</em>);
+</pre>
+
+<dl>
+ <dt><code>retargetToElement</code></dt>
+ <dd>如果被设置为 <code>true</code>, 所有事件被直接定向到这个元素; 如果是 <code>false</code>, 事件也可以在这个元素的子元素上触发。</dd>
+</dl>
+
+<h3 id="Example" name="Example">示例</h3>
+
+<p>在这个例子中，当你在一个元素中点击并且按住鼠标，然后再使用鼠标拖动的时候，当前鼠标位置的坐标就会被绘制出来。</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;鼠标捕捉示例&lt;/title&gt;
+  &lt;style type="text/css"&gt;
+    #myButton {
+      border: solid black 1px;
+      color: black;
+      padding: 2px;
+      -moz-box-shadow:black 2px 2px;
+    }
+  &lt;/style&gt;
+
+  &lt;script type="text/javascript"&gt;
+    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 = "鼠标的当前位置: " + e.clientX + ", " + e.clientY;
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="init()"&gt;
+  &lt;p&gt;这是一个关于如何在 Gecko 2.0 中针对元素使用鼠标捕捉的示例。&lt;/p&gt;
+  &lt;p&gt;&lt;a id="myButton" href="javascript:buttonClicked()"&gt;点我并且按住鼠标滑动&lt;/a&gt;&lt;/p&gt;
+  &lt;div id="output"&gt;还没有任何事件哦！&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="/samples/domref/mousecapture.html">查看在线演示</a></p>
+
+<h3 id="Notes" name="Notes">注意</h3>
+
+<p>这个元素可能不会完全被滚动到顶部或者底部，这取决于其他元素的布局。</p>
+
+<h3 id="Specification" name="Specification">规范</h3>
+
+<p>无</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{ domxref("document.releaseCapture()") }}</li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf