Firefox Tomorrow

web api instance property

MouseEvent: relatedTarget property

View on MDN ↗

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`](/firefox/mdn/api/element/mouseenter_event/) The [`EventTarget`](/firefox/mdn/api/eventtarget/) the pointing device entered to The [`EventTarget`](/firefox/mdn/api/eventtarget/) the pointing device exited from
[`mouseleave`](/firefox/mdn/api/element/mouseleave_event/) The [`EventTarget`](/firefox/mdn/api/eventtarget/) the pointing device exited from The [`EventTarget`](/firefox/mdn/api/eventtarget/) the pointing device entered to
[`mouseout`](/firefox/mdn/api/element/mouseout_event/) The [`EventTarget`](/firefox/mdn/api/eventtarget/) the pointing device exited from The [`EventTarget`](/firefox/mdn/api/eventtarget/) the pointing device entered to
[`mouseover`](/firefox/mdn/api/element/mouseover_event/) The [`EventTarget`](/firefox/mdn/api/eventtarget/) the pointing device entered to The [`EventTarget`](/firefox/mdn/api/eventtarget/) the pointing device exited from
[`dragenter`](/firefox/mdn/api/htmlelement/dragenter_event/) The [`EventTarget`](/firefox/mdn/api/eventtarget/) the pointing device entered to The [`EventTarget`](/firefox/mdn/api/eventtarget/) the pointing device exited from
[`dragleave`](/firefox/mdn/api/htmlelement/dragleave_event/) The [`EventTarget`](/firefox/mdn/api/eventtarget/) the pointing device exited from The [`EventTarget`](/firefox/mdn/api/eventtarget/) the pointing device entered to

For events with no secondary target, relatedTarget returns null.

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

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

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

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also