MouseEvent.relatedTarget
read-only property is the secondary target for the mouse event, if there is one. That is:
| Event name |
target
|
relatedTarget
|
mouseenter
|
EventTarget
the pointing device entered to
|
EventTarget
the pointing device exited from
|
mouseleave
|
EventTarget
the pointing device exited from
|
EventTarget
the pointing device entered to
|
mouseout
|
EventTarget
the pointing device exited from
|
EventTarget
the pointing device entered to
|
mouseover
|
EventTarget
the pointing device entered to
|
EventTarget
the pointing device exited from
|
dragenter
|
EventTarget
the pointing device entered to
|
EventTarget
the pointing device exited from
|
dragexit
|
EventTarget
the pointing device exited from
|
EventTarget
the pointing device entered to
|
For events with no secondary target,
relatedTarget
返回
null
.
FocusEvent.relatedTarget
is a similar property for focus events.
var target = instanceOfMouseEvent.relatedTarget
EventTarget
object or
null
.
Try moving your mouse cursor into and out of the red and blue boxes.
<body id="body"> <div id="outer"> <div id="red"></div> <div id="blue"></div> </div> <p id="log"></p> </body>
#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;
}
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}`;
}
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
relatedTarget
|
Chrome Yes | Edge 12 | Firefox 48 | IE Yes | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
完整支持
MouseEvent