MouseEvent.relatedTarget

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

Event name target relatedTarget
focusin The EventTarget receiving focus The EventTarget losing focus
focusout The EventTarget losing focus The EventTarget receiving focus
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.

Syntax

var tgt = instanceOfMouseEvent.relatedTarget

Return value

An EventTarget object or null.

Example

<!DOCTYPE html>
<html>
<head>

<style>
div > div {
  height: 128px;
  width: 128px;
}
#top    { background-color: red; }
#bottom { background-color: blue; }
</style>

<script>
function outListener(event) {
  console.log("exited " + event.target.id + " for " + event.relatedTarget.id);
}

function overListener(event) {
  console.log("entered " + event.target.id + " from " + event.relatedTarget.id);
}

function loadListener() {
  var top = document.getElementById("top"), 
      bottom = document.getElementById("bottom");

  top.addEventListener("mouseover", overListener);
  top.addEventListener("mouseout", outListener);
  bottom.addEventListener("mouseover", overListener);
  bottom.addEventListener("mouseout", outListener);
}
</script>

</head>

<body onload="loadListener();">

<div id="outer">
  <div id="top"></div>
  <div id="bottom"></div>
</div>

</body>
</html>        

View on JSFiddle

Specifications

Specification Status Comment
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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support 48IE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also

Document Tags and Contributors

Contributors to this page: wbamberg, fscholz, pauln, libbymc, lanzkron, jrefano, teoli, kscarfone, Jeremie
Last updated by: wbamberg,