diff options
Diffstat (limited to 'files/ja/web/api/element/mouseout_event/index.md')
| -rw-r--r-- | files/ja/web/api/element/mouseout_event/index.md | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/files/ja/web/api/element/mouseout_event/index.md b/files/ja/web/api/element/mouseout_event/index.md new file mode 100644 index 0000000000..a27a6f4f57 --- /dev/null +++ b/files/ja/web/api/element/mouseout_event/index.md @@ -0,0 +1,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> |