当前位置：文江博客知识库 en-US 文档 Web API MouseEvent relatedTarget

MouseEvent.relatedTarget - Web APIs 编辑

The MouseEvent.relatedTarget read-only property is the secondary target for the mouse event, if there is one. That is:

Event name	`target`	`relatedTarget`
`mouseenter`	The `EventTarget` the pointing device entered to	The `EventTarget` the pointing device exited from
`mouseleave`	The `EventTarget` the pointing device exited from	The `EventTarget` the pointing device entered to
`mouseout`	The `EventTarget` the pointing device exited from	The `EventTarget` the pointing device entered to
`mouseover`	The `EventTarget` the pointing device entered to	The `EventTarget` the pointing device exited from
`dragenter`	The `EventTarget` the pointing device entered to	The `EventTarget` the pointing device exited from
`dragexit`	The `EventTarget` the pointing device exited from	The `EventTarget` the pointing device entered to

For events with no secondary target, relatedTarget returns null.

FocusEvent.relatedTarget is a similar property for focus events.

Syntax

var target = instanceOfMouseEvent.relatedTarget

Return value

An EventTarget object or null.

Example

Try moving your mouse cursor into and out of the red and blue boxes.

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

Specifications

Specification	Status	Comment
UI Events The definition of 'MouseEvent.relatedTarget' in that specification.	Working Draft
Document Object Model (DOM) Level 3 Events Specification The definition of 'MouseEvent.relatedTarget' in that specification.	Obsolete	No change from Document Object Model (DOM) Level 2 Events Specification.
Document Object Model (DOM) Level 2 Events Specification The definition of 'MouseEvent.altkey' in that specification.	Obsolete	Initial definition.

Browser compatibility

BCD tables only load in the browser

MouseEvent.relatedTarget - Web APIs 编辑

Syntax

Return value

Example

HTML

CSS

JavaScript

Result

Specifications

Browser compatibility

See also

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

MouseEvent.relatedTarget - Web APIs 编辑

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。