MouseEvent.relatedTarget
The MouseEvent.relatedTarget
read-only property is the secondary target for the event, if there is one. That is:
Event name | target |
relatedTarget |
focusin | The EventTarget receiving focus |
The EventTarget losing focus |
focusout | The EventTarget losing focus |
The EventTarget receiving focus |
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 |
dragexit | The EventTarget the pointing device exited from |
The EventTarget the pointing device entered to |
For events with no secondary target, relatedTarget
returns null
.
Syntax
JavaScript
Copy Code
var tgt = instanceOfMouseEvent.relatedTarget
Return value
An EventTarget
object or null
.
Example
HTML
Copy Code
<!DOCTYPE html> <html> <head> <style> div > div { height: 128px; width: 128px; } #top { background-color: red; } #bottom { background-color: blue; } </style> <script> function outListener(event) { console.log("exited " + event.target.id + " for " + event.relatedTarget.id); } function overListener(event) { console.log("entered " + event.target.id + " from " + event.relatedTarget.id); } function loadListener() { var top = document.getElementById("top"), bottom = document.getElementById("bottom"); top.addEventListener("mouseover", overListener); top.addEventListener("mouseout", outListener); bottom.addEventListener("mouseover", overListener); bottom.addEventListener("mouseout", outListener); } </script> </head> <body onload="loadListener();"> <div id="outer"> <div id="top"></div> <div id="bottom"></div> </div> </body> </html>
Specifications
Specification | Status | Comment |
---|---|---|
Document Object Model (DOM) Level 3 Events Specification The definition of 'MouseEvent.relatedTarget' in that specification. |
Working Draft | No change from Document Object Model (DOM) Level 2 Events Specification. |
Document Object Model (DOM) Level 2 Events Specification The definition of 'MouseEvent.altkey' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | Not supported | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
See also
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/mouseevent/relatedtarget