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.
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
Specifications
Specification |
---|
UI Events # dom-mouseevent-relatedtarget |
Browser compatibility
BCD tables only load in the browser