--- title: MouseEvent.relatedTarget slug: Web/API/MouseEvent/relatedTarget tags: - API - DOM - DOM イベント - MouseEvent - プロパティ - 読み取り専用 - リファレンス browser-compat: api.MouseEvent.relatedTarget translation_of: Web/API/MouseEvent/relatedTarget --- {{APIRef("DOM Events")}} **`MouseEvent.relatedTarget`** は読み取り専用プロパティで、もしあれば、マウスイベントの副ターゲットを表します。 すなわち、
イベント名 target relatedTarget
{{domxref("Element/mouseenter_event", "mouseenter")}} ポインティングデバイスが入った {{domxref("EventTarget")}} ポインティングデバイスが離れた {{domxref("EventTarget")}}
{{domxref("Element/mouseleave_event", "mouseleave")}} ポインティングデバイスが離れた {{domxref("EventTarget")}} ポインティングデバイスが入った {{domxref("EventTarget")}}
{{domxref("Element/mouseout_event", "mouseout")}} ポインティングデバイスが離れた {{domxref("EventTarget")}} ポインティングデバイスが入った {{domxref("EventTarget")}}
{{domxref("Element/mouseover_event", "mouseover")}} ポインティングデバイスが入った {{domxref("EventTarget")}} ポインティングデバイスが離れた {{domxref("EventTarget")}}
{{Event("dragenter")}} ポインティングデバイスが入った {{domxref("EventTarget")}} ポインティングデバイスが離れた {{domxref("EventTarget")}}
{{Event("dragleave")}} ポインティングデバイスが離れた {{domxref("EventTarget")}} ポインティングデバイスが入った {{domxref("EventTarget")}}
副ターゲットがないイベントでは、 `relatedTarget` は `null` を返します。 {{domxref("FocusEvent.relatedTarget")}} はフォーカスイベントでの同様のプロパティです。 ## 値 {{domxref("EventTarget")}} オブジェクトまたは `null` です。 ## 例 赤と青のボックスを出たり入ったりしてみてください。 ### HTML ```html

``` ### CSS ```css #outer { width: 250px; height: 125px; display: flex; } #red { flex-grow: 1; background: red; } #blue { flex-grow: 1; background: blue; } #log { max-height: 120px; overflow-y: scroll; } ``` ### JavaScript ```js const mouseoutLog = document.getElementById('log'), red = document.getElementById('red'), blue = document.getElementById('blue'); red.addEventListener('mouseover', overListener); red.addEventListener('mouseout', outListener); blue.addEventListener('mouseover', overListener); blue.addEventListener('mouseout', outListener); function outListener(event) { let related = event.relatedTarget ? event.relatedTarget.id : "unknown"; mouseoutLog.innerText = `\nfrom ${event.target.id} into ${related} ${mouseoutLog.innerText}`; } function overListener(event) { let related = event.relatedTarget ? event.relatedTarget.id : "unknown"; log.innerText = `\ninto ${event.target.id} from ${related} ${mouseoutLog.innerText}`; } ``` ### 結果 {{EmbedLiveSample("Example", 700, 280)}} ## 仕様書 {{Specifications}} ## ブラウザーの互換性 {{Compat}} ## 関連情報 - {{ domxref("MouseEvent") }} - [イベントターゲットの比較](/ja/docs/Web/API/Event/Comparison_of_Event_Targets)