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 |
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.
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 |
---|
UI Events # dom-mouseevent-relatedtarget |
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 |
≤4 |
≤37 |
18 |
4 |
≤12.1 |
≤3 |
1.0 |
See also
© 2005–2021 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