MouseEvent.relatedTarget

只读属性 MouseEvent.relatedTarget 是鼠标事件的次要目标（如果存在），它包括：

target relatedTarget

如果事件没有次要目标， relatedTarget 将返回 null .

语法 

var target = instanceOfMouseEvent.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";