当前位置：文江博客知识库简体中文文档 Web API MouseEvent relatedTarget

MouseEvent.relatedTarget - Web API 接口参考编辑

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

事件名称	`target`	`relatedTarget`
`focusin`	`EventTarget` 获取焦点	`EventTarget` 失去焦点
`focusout`	`EventTarget` 失去焦点	The `EventTarget` 获取焦点
`mouseenter`	指针设备进入`EventTarget`	指针设备离开`EventTarget`
`mouseleave`	指针设备离开 `EventTarget`	指针设备进入 `EventTarget`
`mouseout`	指针设备离开 `EventTarget`	The `EventTarget`
`mouseover`	指针设备进入 `EventTarget`	指针设备离开 `EventTarget`
`dragenter`	指针设备进入 `EventTarget`	指针设备离开 `EventTarget`
`dragexit`	指针设备离开 `EventTarget`	指针设备进入 `EventTarget`

如果事件没有次要目标，relatedTarget 将返回 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}`;
}

详述

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.

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.