MouseEvent: relatedTarget プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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}`;
}
結果
仕様書
Specification |
---|
UI Events # dom-mouseevent-relatedtarget |
ブラウザーの互換性
BCD tables only load in the browser