MouseEvent: relatedTarget property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
| Specification |
|---|
| UI Events # dom-mouseevent-relatedtarget |
Browser compatibility
Loading…