From b08a7f7cfb07e6296bdcae71d83293ce47444748 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 2 Jan 2022 16:39:51 +0900 Subject: 2021/11/05 時点の英語版に基づき新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/mouseevent/relatedtarget/index.md | 177 +++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 files/ja/web/api/mouseevent/relatedtarget/index.md (limited to 'files') diff --git a/files/ja/web/api/mouseevent/relatedtarget/index.md b/files/ja/web/api/mouseevent/relatedtarget/index.md new file mode 100644 index 0000000000..54f2328142 --- /dev/null +++ b/files/ja/web/api/mouseevent/relatedtarget/index.md @@ -0,0 +1,177 @@ +--- +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) -- cgit v1.2.3-54-g00ecf