W3cubDocs

/Web APIs

MouseEvent: relatedTarget property

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
dragleave 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.

Value

An EventTarget object or null.

Examples

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

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

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

Result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
relatedTarget 1 12 1.5 9 ≤12.1 1 ≤37 18 4 ≤12.1 1 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget