Your Search Results

    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

    var tgt = instanceOfMouseEvent.relatedTarget

    Return value

    An EventTarget object or null.

    Example

    <!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>

    View on JSFiddle

    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

    Document Tags and Contributors

    Tags: 
     Contributors to this page: lanzkron, jrefano, teoli, kscarfone, Jeremie
     Last updated by: lanzkron,