1 files changed, 169 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/mouseevent/relatedtarget/index.html b/files/zh-cn/web/api/mouseevent/relatedtarget/index.html
new file mode 100644
index 0000000000..a184a8a2f3
--- /dev/null
+++ b/files/zh-cn/web/api/mouseevent/relatedtarget/index.html
@@ -0,0 +1,169 @@
+---
+title: MouseEvent.relatedTarget
+slug: Web/API/MouseEvent/relatedTarget
+translation_of: Web/API/MouseEvent/relatedTarget
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<div>只读属性<strong><code>MouseEvent.relatedTarget</code></strong> 是鼠标事件的次要目标（如果存在），它包括：</div>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">事件名称</td>
+   <td class="header"><code>target</code></td>
+   <td class="header"><code>relatedTarget</code></td>
+  </tr>
+  <tr>
+   <td>{{Event("focusin")}}</td>
+   <td>{{domxref("EventTarget")}} 获取焦点</td>
+   <td>{{domxref("EventTarget")}} 失去焦点</td>
+  </tr>
+  <tr>
+   <td>{{Event("focusout")}}</td>
+   <td>{{domxref("EventTarget")}} 失去焦点</td>
+   <td>The {{domxref("EventTarget")}} 获取焦点</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseenter")}}</td>
+   <td>指针设备进入{{domxref("EventTarget")}}</td>
+   <td>指针设备离开{{domxref("EventTarget")}}</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseleave")}}</td>
+   <td>指针设备离开 {{domxref("EventTarget")}}</td>
+   <td>指针设备进入 {{domxref("EventTarget")}}</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseout")}}</td>
+   <td>指针设备离开 {{domxref("EventTarget")}}</td>
+   <td>The {{domxref("EventTarget")}}</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseover")}}</td>
+   <td>指针设备进入 {{domxref("EventTarget")}}</td>
+   <td>指针设备离开 {{domxref("EventTarget")}}</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragenter")}}</td>
+   <td>指针设备进入 {{domxref("EventTarget")}}</td>
+   <td>指针设备离开 {{domxref("EventTarget")}}</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragexit")}}</td>
+   <td>指针设备离开 {{domxref("EventTarget")}}</td>
+   <td>指针设备进入 {{domxref("EventTarget")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>如果事件没有次要目标，<code>relatedTarget</code> 将返回 <code>null</code>.</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>target</em> = <em>instanceOfMouseEvent</em>.relatedTarget
+</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p> {{domxref("EventTarget")}} 对象或者 <code>null</code>.</p>
+
+<h2 id="示例">示例</h2>
+
+<p>尝试将你的鼠标移入移出红色和蓝色方块。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;body id="body"&gt;
+  &lt;div id="outer"&gt;
+    &lt;div id="red"&gt;&lt;/div&gt;
+    &lt;div id="blue"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;p id="log"&gt;&lt;/p&gt;
+&lt;/body&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#outer {
+  width: 250px;
+  height: 125px;
+  display: flex;
+}
+
+#red {
+  flex-grow: 1;
+  background: red;
+}
+
+#blue {
+  flex-grow: 1;
+  background: blue;
+}
+
+#log {
+  max-height: 120px;
+  overflow-y: scroll;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const mouseoutLog = document.getElementById('log'),
+      red = document.getElementById('red'),
+      blue = document.getElementById('blue');
+
+red.addEventListener('mouseover', overListener);
+red.addEventListener('mouseout', outListener);
+blue.addEventListener('mouseover', overListener);
+blue.addEventListener('mouseout', outListener);
+
+function outListener(event) {
+  let related = event.relatedTarget ? event.relatedTarget.id : "unknown";
+
+  mouseoutLog.innerText = `\nfrom ${event.target.id} into ${related} ${mouseoutLog.innerText}`;
+}
+
+function overListener(event) {
+  let related = event.relatedTarget ? event.relatedTarget.id : "unknown";
+
+  log.innerText = `\ninto ${event.target.id} from ${related} ${mouseoutLog.innerText}`;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example", 700, 280)}}</p>
+
+<h2 id="详述">详述</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-relatedTarget','MouseEvent.relatedTarget')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>No change from {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.altkey')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.MouseEvent.relatedTarget")}}</p>
+
+<h2 id="另见">另见</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+ <li><a href="/en-US/docs/DOM/event/Comparison_of_Event_Targets" title="DOM/event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li>
+</ul>