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 |
浏览器兼容性
加载中…