MouseEvent: relatedTarget プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
MouseEvent.relatedTarget は読み取り専用プロパティで、もしあれば、マウスイベントの副ターゲットを表します。
すなわち、
| イベント名 | target |
relatedTarget |
|---|---|---|
mouseenter |
ポインティングデバイスが入った EventTarget
|
ポインティングデバイスが離れた EventTarget
|
mouseleave |
ポインティングデバイスが離れた EventTarget
|
ポインティングデバイスが入った EventTarget
|
mouseout |
ポインティングデバイスが離れた EventTarget
|
ポインティングデバイスが入った EventTarget
|
mouseover |
ポインティングデバイスが入った EventTarget
|
ポインティングデバイスが離れた EventTarget
|
dragenter |
ポインティングデバイスが入った EventTarget
|
ポインティングデバイスが離れた EventTarget
|
dragleave |
ポインティングデバイスが離れた EventTarget
|
ポインティングデバイスが入った EventTarget
|
副ターゲットがないイベントでは、 relatedTarget は
null を返します。
FocusEvent.relatedTarget はフォーカスイベントでの同様のプロパティです。
値
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";
mouseoutLog.innerText = `\ninto ${event.target.id} from ${related} ${mouseoutLog.innerText}`;
}
結果
仕様書
| 仕様書 |
|---|
| Pointer Events # dom-mouseevent-relatedtarget |