Web/API/MouseEvent/relatedTarget

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 EventsThe definition of 'MouseEvent.relatedTarget' in that specification.	Working Draft
Document Object Model (DOM) Level 3 Events SpecificationThe 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 SpecificationThe definition of 'MouseEvent.altkey' in that specification.	Obsolete	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`relatedTarget`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 48	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support