MouseEvent.relatedTarget

只读属性MouseEvent.relatedTarget 是鼠标事件的次要目标(如果存在),它包括:
事件名称 target relatedTarget
focusin (en-US) EventTarget 获取焦点 EventTarget 失去焦点
focusout (en-US) EventTarget 失去焦点 The EventTarget 获取焦点
mouseenter (en-US) 指针设备进入EventTarget 指针设备离开EventTarget
mouseleave (en-US) 指针设备离开 EventTarget 指针设备进入 EventTarget
mouseout (en-US) 指针设备离开 EventTarget The EventTarget
mouseover (en-US) 指针设备进入 EventTarget 指针设备离开 EventTarget
dragenter (en-US) 指针设备进入 EventTarget 指针设备离开 EventTarget
dragexit 指针设备离开 EventTarget 指针设备进入 EventTarget

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

语法

var target = instanceOfMouseEvent.relatedTarget

返回值

 EventTarget 对象或者 null.

示例

尝试将你的鼠标移入移出红色和蓝色方块。

HTML

<body id="body">
  <div id="outer">
    <div id="red"></div>
    <div id="blue"></div>
  </div>
  <p id="log"></p>
</body>

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";

  log.innerText = `\ninto ${event.target.id} from ${related} ${mouseoutLog.innerText}`;
}

Result

详述

Specification Status Comment
Document Object Model (DOM) Level 3 Events Specification
MouseEvent.relatedTarget
Obsolete No change from Document Object Model (DOM) Level 2 Events Specification.
Document Object Model (DOM) Level 2 Events Specification
MouseEvent.altkey
Obsolete Initial definition.

浏览器兼容性

BCD tables only load in the browser

另见