files/zh-cn/web/api/element/mouseout_event/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
125
126

---
title: 'Element: mouseout 事件'
slug: Web/API/Element/mouseout_event
tags:
  - API
  - DOM
  - Event
  - Interface
  - MouseEvent
  - Reference
  - events
  - mouseout
  - 事件
  - 参考
  - 接口
translation_of: Web/API/Element/mouseout_event
---
<p>当移动指针设备（通常是鼠标），使指针不再包含在这个元素或其子元素中时，<strong><code>mouseout</code></strong> 事件被触发。当指针从一个元素移入其子元素时，<code>mouseout</code> 也会被触发，因为子元素遮盖了父元素的可视区域。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Bubbles</th>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Cancelable</th>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Interface</th>
   <td>{{domxref("MouseEvent")}}</td>
  </tr>
  <tr>
   <th scope="row">Event handler property</th>
   <td>{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="示例">示例</h2>

<p>以下示例将说明如何使用 <code>mouseout</code> 事件。</p>

<h3 id="mouseout_和_mouseleave">mouseout 和 mouseleave</h3>

<p>以下示例说明了 <code>mouseout</code> 和 <a href="/en-US/docs/Web/Events/mouseleave" title="/en/Mozilla_event_reference/mouseleave"><code>mouseleave</code></a> 事件的区别。当鼠标离开<code>&lt;ul&gt;</code> 时，<code>mouseleave</code> 事件会添加到 {{HTMLElement("ul")}} 以将列表变成紫色。<code>mouseout</code> 在鼠标移出目标元素时被添加到列表，以将目标元素变成橙色。</p>

<p>当你尝试的时候，你会发现 <code>mouseout</code> 被添加到单个列表项目上，而 <code>mouseleave</code> 则应用于整个列表，这取决于列表项目的层次关系，而列表项目遮盖了底层的 <code>&lt;ul&gt;</code>。</p>

<h4 id="HTML">HTML</h4>

<pre>&lt;ul id="test"&gt;
  &lt;li&gt;item 1&lt;/li&gt;
  &lt;li&gt;item 2&lt;/li&gt;
  &lt;li&gt;item 3&lt;/li&gt;
&lt;/ul&gt;
</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">let test = document.getElementById("test");

// 当鼠标移出&lt;ul&gt;元素时，短暂地将列表变成紫色
test.addEventListener("mouseleave", function( event ) {
  // 高亮mouseleave的目标
  event.target.style.color = "purple";

  // 延迟一秒后重置颜色
  setTimeout(function() {
    event.target.style.color = "";
  }, 1000);
}, false);

// 当鼠标离开&lt;li&gt;元素时，短暂地将其变成橙色
test.addEventListener("mouseout", function( event ) {
  // 高亮mouseout的目标
  event.target.style.color = "orange";

  // 延迟500ms后重置颜色
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);</pre>

<h4 id="结果">结果</h4>

<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="200" id="frame_mouseout_and_mouseleave" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Element/mouseout_event$samples/mouseout_and_mouseleave?revision=1552558" width="640"></iframe></p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
  </tr>
  <tr>
   <td>{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}</td>
   <td>{{Spec2('UI Events')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("api.Element.mouseout_event")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
 <li>{{Event("mousedown")}}</li>
 <li>{{Event("mouseup")}}</li>
 <li>{{Event("mousemove")}}</li>
 <li>{{Event("click")}}</li>
 <li>{{Event("dblclick")}}</li>
 <li>{{Event("mouseover")}}</li>
 <li>{{Event("mouseenter")}}</li>
 <li>{{Event("mouseleave")}}</li>
 <li>{{Event("contextmenu")}}</li>
</ul>