MouseEvent: relatedTarget 屬性
MouseEvent.relatedTarget 只讀屬性是滑鼠事件的第二個目標，如果存在的話。
也就是說：
| 事件名稱 | 目標 |
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}`;
}
結果
規範
| 規範 |
|---|
| UI 事件 # dom-mouseevent-relatedtarget |
瀏覽器相容性
載入中…