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
127
128
129
130
131
132
|
---
title: 'Element: mouseout イベント'
slug: Web/API/Element/mouseout_event
tags:
- API
- DOM
- Event
- Interface
- MouseEvent
- Reference
- events
- mouse
- mouseout
- move
- イベント
- マウス
translation_of: Web/API/Element/mouseout_event
---
<div>{{APIRef}}</div>
<p><span class="seoSummary"><strong><code>mouseout</code></strong> イベントは {{domxref("Element")}} において、ポインティングデバイス (普通はマウス) を使用してカーソルが要素またはその子要素のうちの一つに含まれなくなったときに発生します。</span> <code>mouseout</code> は、カーソルが子要素に入った場合にも要素に配信されますが、これは子要素が要素の可視領域を覆い隠すためです。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row">バブリング</th>
<td>あり</td>
</tr>
<tr>
<th scope="row">キャンセル</th>
<td>可</td>
</tr>
<tr>
<th scope="row">インターフェイス</th>
<td>{{domxref("MouseEvent")}}</td>
</tr>
<tr>
<th scope="row">イベントハンドラープロパティ</th>
<td>{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}</td>
</tr>
</tbody>
</table>
<h2 id="Examples" name="Examples">例</h2>
<p>以下の例は <code>mouseout</code> イベントの使い方を示しています。</p>
<h3 id="mouseout_と_mouseleave">mouseout と mouseleave</h3>
<p>以下の例は、 <code>mouseout</code> と {{domxref("Element/mouseleave_event", "mouseleave")}} の各イベントの違いを説明しています。 <code>mouseleave</code> イベントを {{HTMLElement("ul")}} に追加し、マウスが <code><ul></code> を出るたびにリストを紫色に着色するようにします。 <code>mouseout</code> をリストに追加し、マウスがそこを出ると対象の要素をオレンジ色に着色するようにします。</p>
<p>これを試してみると、 <code>mouseout</code> はそれぞれのリスト項目に配信されるのに対し、 <code>mouseleave</code> は項目の階層構造のおかげでリスト全体に行き、リストの項目は、その下にある <code><ul></code> を不明瞭にします。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js notranslate">let test = document.getElementById("test");
// マウスが <ul> を出るとリストを一時的に紫色にします
// ときに1度だけ実行されます
test.addEventListener("mouseleave", function( event ) {
// mouseleave の対象を強調
event.target.style.color = "purple";
// 少し待ってから色をリセット
setTimeout(function() {
event.target.style.color = "";
}, 1000);
}, false);
// マウスが出ると <li> を一時的にオレンジ色にします
test.addEventListener("mouseout", function( event ) {
// mouseout の対象を強調
event.target.style.color = "orange";
// 少し待ってから色をリセット
setTimeout(function() {
event.target.style.color = "";
}, 500);
}, false);</pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample("mouseout_and_mouseleave", 640, 200)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
</tr>
</thead>
<thead>
<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>
</thead>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("api.Element.mouseout_event")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li>
<li>{{domxref("Element/mousedown_event", "mousedown")}}</li>
<li>{{domxref("Element/mouseup_event", "mouseup")}}</li>
<li>{{domxref("Element/mousemove_event", "mousemove")}}</li>
<li>{{domxref("Element/click_event", "click")}}</li>
<li>{{domxref("Element/dblclick_event", "dblclick")}}</li>
<li>{{domxref("Element/mouseover_event", "mouseover")}}</li>
<li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li>
<li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li>
<li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li>
</ul>
|
