files/zh-cn/conflicting/web/api/mouseevent/relatedtarget/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

---
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">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;

&lt;style&gt;
div &gt; div {
  height: 128px;
  width: 128px;
}
#top    { background-color: red; }
#bottom { background-color: blue; }
&lt;/style&gt;

&lt;script&gt;
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);
}
&lt;/script&gt;

&lt;/head&gt;

&lt;body onload="loadListener();"&gt;

&lt;div id="outer"&gt;
  &lt;div id="top"&gt;&lt;/div&gt;
  &lt;div id="bottom"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</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>