diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-02 16:39:51 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-09 12:37:43 +0900 |
| commit | b08a7f7cfb07e6296bdcae71d83293ce47444748 (patch) | |
| tree | 4cf6142dcb02d57d9cd297eb72e6a0ce3e9ede36 /files/ja/web | |
| parent | d8140c1640f7c1943e2bccc76434536a78aa69d1 (diff) | |
| download | translated-content-b08a7f7cfb07e6296bdcae71d83293ce47444748.tar.gz translated-content-b08a7f7cfb07e6296bdcae71d83293ce47444748.tar.bz2 translated-content-b08a7f7cfb07e6296bdcae71d83293ce47444748.zip | |
2021/11/05 時点の英語版に基づき新規翻訳
Diffstat (limited to 'files/ja/web')
| -rw-r--r-- | files/ja/web/api/mouseevent/relatedtarget/index.md | 177 |
1 files changed, 177 insertions, 0 deletions
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`** は読み取り専用プロパティで、もしあれば、マウスイベントの副ターゲットを表します。 + +すなわち、 + +<table class="no-markdown"> + <thead> + <tr> + <th>イベント名</th> + <th><code>target</code></th> + <th><code>relatedTarget</code></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("Element/mouseenter_event", "mouseenter")}}</td> + <td> + ポインティングデバイスが入った {{domxref("EventTarget")}} + </td> + <td> + ポインティングデバイスが離れた {{domxref("EventTarget")}} + </td> + </tr> + <tr> + <td>{{domxref("Element/mouseleave_event", "mouseleave")}}</td> + <td> + ポインティングデバイスが離れた {{domxref("EventTarget")}} + </td> + <td> + ポインティングデバイスが入った {{domxref("EventTarget")}} + </td> + </tr> + <tr> + <td>{{domxref("Element/mouseout_event", "mouseout")}}</td> + <td> + ポインティングデバイスが離れた {{domxref("EventTarget")}} + </td> + <td> + ポインティングデバイスが入った {{domxref("EventTarget")}} + </td> + </tr> + <tr> + <td>{{domxref("Element/mouseover_event", "mouseover")}}</td> + <td> + ポインティングデバイスが入った {{domxref("EventTarget")}} + </td> + <td> + ポインティングデバイスが離れた {{domxref("EventTarget")}} + </td> + </tr> + <tr> + <td>{{Event("dragenter")}}</td> + <td> + ポインティングデバイスが入った {{domxref("EventTarget")}} + </td> + <td> + ポインティングデバイスが離れた {{domxref("EventTarget")}} + </td> + </tr> + <tr> + <td>{{Event("dragleave")}}</td> + <td> + ポインティングデバイスが離れた {{domxref("EventTarget")}} + </td> + <td> + ポインティングデバイスが入った {{domxref("EventTarget")}} + </td> + </tr> + </tbody> +</table> + +副ターゲットがないイベントでは、 `relatedTarget` は +`null` を返します。 + +{{domxref("FocusEvent.relatedTarget")}} はフォーカスイベントでの同様のプロパティです。 + +## 値 + +{{domxref("EventTarget")}} オブジェクトまたは `null` です。 + +## 例 + +赤と青のボックスを出たり入ったりしてみてください。 + +### HTML + +```html +<body id="body"> + <div id="outer"> + <div id="red"></div> + <div id="blue"></div> + </div> + <p id="log"></p> +</body> +``` + +### 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) |