MouseEvent: relatedTarget 属性

基线广泛可用

此功能已成熟，并在许多设备和浏览器版本中运行。它自 2015 年 7 月.

报告反馈

**MouseEvent.relatedTarget** 只读属性是鼠标事件的次要目标（如果有）。

也就是说	`事件名称`	`relatedTarget`
`target`	指向设备进入的 `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

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

参见

MouseEvent