MouseEvent.relatedTarget

Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!

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
dragexit 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 Status Comment
UI Events
The definition of 'MouseEvent.relatedTarget' in that specification.
Working Draft
Document Object Model (DOM) Level 3 Events Specification
The definition of 'MouseEvent.relatedTarget' in that specification.
Obsolete 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.
Obsolete Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
relatedTargetChrome Full support YesEdge Full support 12Firefox Full support 48IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

See also