diff options
Diffstat (limited to 'files/zh-cn/web/api/event.relatedtarget/index.html')
-rw-r--r-- | files/zh-cn/web/api/event.relatedtarget/index.html | 124 |
1 files changed, 0 insertions, 124 deletions
diff --git a/files/zh-cn/web/api/event.relatedtarget/index.html b/files/zh-cn/web/api/event.relatedtarget/index.html deleted file mode 100644 index a334f4b2eb..0000000000 --- a/files/zh-cn/web/api/event.relatedtarget/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: event.relatedTarget -slug: Web/API/event.relatedTarget -translation_of: Web/API/MouseEvent/relatedTarget -translation_of_original: Web/API/event.relatedTarget ---- -<h2 id="Summary" name="Summary"> </h2> - -<p>{{APIRef("DOM")}}</p> - -<h2 id="Summary" name="Summary">简要</h2> - -<p>为事件标识第二目标</p> - -<h2 id="Summary" name="Summary">描述</h2> - -<p><code>relatedTarget</code> 属性用于在一个事件中查找另外一个元素。有些事件比如 <code>mouseover</code> 通常侧重处理一个特定的目标,而有些有也可能会涉及到第二目标,比如当目标退出第一目标的 <code>mouseover</code> 事件.</p> - -<h2 id="事件">事件</h2> - -<p>只有 <code>MouseEvent</code>s 有这个属性,而且这些些只在特定的 <code>MouseEvent</code>s 事件中有效:</p> - -<table class="standard-table" style="width: auto;"> - <tbody> - <tr> - <td class="header">事件名</td> - <td class="header"><code>relatedTarget</code> role</td> - </tr> - <tr> - <td>focusin</td> - <td>哪个 {{domxref("EventTarget")}} 失去焦点</td> - </tr> - <tr> - <td>focusout</td> - <td>哪个 {{domxref("EventTarget")}} 获得焦点</td> - </tr> - <tr> - <td>mouseenter</td> - <td>鼠标从哪个 {{domxref("EventTarget")}} 进来</td> - </tr> - <tr> - <td>mouseleave</td> - <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td> - </tr> - <tr> - <td>mouseout</td> - <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td> - </tr> - <tr> - <td>mouseover</td> - <td>鼠标从哪个{{domxref("EventTarget")}} 进来</td> - </tr> - <tr> - <td>dragenter</td> - <td>鼠标从哪个{{domxref("EventTarget")}} 进来</td> - </tr> - <tr> - <td>dragexit</td> - <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td> - </tr> - </tbody> -</table> - -<h2 id="Example" name="Example">示例</h2> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - -<style> -div > div { - height: 128px; - width: 128px; -} -#top { background-color: red; } -#bottom { background-color: blue; } -</style> - -<script> -function outListener(event) { - console.log("exited " + event.target.id + " for " + event.relatedTarget.id); -} - -function overListener(event) { - console.log("entered " + event.target.id + " from " + event.relatedTarget.id); -} - -function loadListener() { - var top = document.getElementById("top"), - bottom = document.getElementById("bottom"); - - top.addEventListener("mouseover", overListener); - top.addEventListener("mouseout", outListener); - bottom.addEventListener("mouseover", overListener); - bottom.addEventListener("mouseout", outListener); -} -</script> - -</head> - -<body onload="loadListener();"> - -<div id="outer"> - <div id="top"></div> - <div id="bottom"></div> -</div> - -</body> -</html> -</pre> - -<p><a href="https://jsfiddle.net/uTe99">在JSFiddle中查看</a></p> - -<h2 id="Specification" name="Specification">Specification</h2> - -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-relatedTarget">DOM Level 2 Events: MouseEvent.relatedTarget</a></li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <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> |