jQuery event.relatedTarget Property

Beginner
6 min read
Updated: Oct 2026
5 examples
Live preview
jQuery event.relatedTarget property — the other DOM element in mouseover and mouseout events
Definition

What Is event.relatedTarget?

event.relatedTarget is an Element on the jQuery event object — the other DOM node involved in a pointer move, if any. For mouseout, it is the element being entered; for mouseover, the element being exited. Added in jQuery 1.1.4.

Remember
event.relatedTarget   // Element | null — read-only

// mouseout  → relatedTarget = element you are entering
// mouseover → relatedTarget = element you are leaving

$("a").on("mouseout", function (event) {
  if (event.relatedTarget) {
    console.log(event.relatedTarget.nodeName); // e.g. "DIV"
  }
});
NeedUse
Other element in moveevent.relatedTarget
Element that got the eventevent.target
Handler’s elementevent.currentTarget
Leave an element.on("mouseout", …)
Enter an element.on("mouseover", …)
Approach

How to Use event.relatedTarget

Bind mouseover or mouseout, then read the other element — with a null check.

  1. Bind mouseout or mouseover on the element you care about.
  2. In the handler, read event.relatedTarget.
  3. Guard with if (event.relatedTarget) before using nodeName or jQuery.
  4. Compare with event.target when you need “this vs the other”.
  5. For menus, test whether relatedTarget is still inside your widget ($.contains).
PieceRequired?Role
mouseover / mouseoutYesEvents that expose relatedTarget
event.relatedTarget—Other element (or null)
Null checkRecommendedPointer may leave the document
$.contains / .closestOptionalKeep menus open when moving inside

Pseudocode

Pseudocode
element.on("mouseout" | "mouseover", handler)

when pointer crosses a boundary:
    event.target         = element for this event
    event.relatedTarget  = the other element (or null)

    if event.type == "mouseout":
        relatedTarget = where we are going
    if event.type == "mouseover":
        relatedTarget = where we came from

    if relatedTarget is null:
        // left / entered the document — guard before use
Reference

Cheat Sheet

Keep these facts handy while tracing pointer transitions.

TopicDetail
TypeElement property (or null)
SincejQuery 1.1.4
mouseoutElement being entered
mouseoverElement being exited
Official demorelatedTarget.nodeName on anchor mouseout
vs targetOther element vs event recipient
Null?Yes — when leaving/entering the document
Mutates?No — read-only
Try it

Live Preview

Move from the link into the sibling area — same idea as the official jQuery API demo.

Hover
Sample link

Leave the link toward the sibling — log shows relatedTarget.nodeName.

Result
Mouse out from the link toward the sibling area.
Code

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

Example 1 — Official Demo: relatedTarget.nodeName

On mouseout from a link, log the element being entered.

jQuery
$("a").on("mouseout", function (event) {
  if (event.relatedTarget) {
    $("#out").text(
      "relatedTarget: " + event.relatedTarget.nodeName
    );
  }
});
Try It Yourself

How It Works

  1. Bind. mouseout fires when the pointer leaves the link.
  2. Other element. relatedTarget is where you are going.
  3. Guard. Skip if relatedTarget is null.
  4. Log. nodeName is the tag name (e.g. DIV).

Example 2 — mouseover vs mouseout

Same property, opposite meaning of “the other” element.

jQuery
$("#zone").on("mouseover mouseout", function (event) {
  var rt = event.relatedTarget;
  var dir = event.type === "mouseover" ? "from" : "to";
  var name = rt
    ? rt.nodeName + (rt.id ? "#" + rt.id : "")
    : "(outside document)";
  $("#out").text(event.type + " — relatedTarget " + dir + ": " + name);
});
Try It Yourself

How It Works

  1. Two events. One handler for enter and leave.
  2. mouseover. relatedTarget is where you came from.
  3. mouseout. relatedTarget is where you are going.
  4. Label. Print from / to so the direction is clear.

Example 3 — target vs relatedTarget

See both sides of a pointer transition on the same event.

jQuery
$("#panel").on("mouseout", "a", function (event) {
  var rt = event.relatedTarget;
  $("#out").text(
    "target: " + event.target.nodeName + "\n" +
    "currentTarget: " + event.currentTarget.nodeName + "\n" +
    "relatedTarget: " + (rt ? rt.nodeName : "null")
  );
});
Try It Yourself

How It Works

  1. target. The link that fired mouseout.
  2. currentTarget. The element the handler is bound to (here the same a via delegation).
  3. relatedTarget. The element you moved into.
  4. Takeaway. Two different nodes describe one pointer move.

Example 4 — Keep a Widget Open

If relatedTarget is still inside the widget, do not close.

jQuery
var wrap = document.getElementById("menu-wrap");

$("#trigger").on("mouseover", function () {
  $("#out").text("Menu open");
});

$("#trigger, #panel").on("mouseout", function (event) {
  var rt = event.relatedTarget;
  if (rt && $.contains(wrap, rt)) {
    $("#out").text("Still inside widget — stay open");
    return;
  }
  $("#out").text("Left widget — close");
});
Try It Yourself

How It Works

  1. Open. mouseover on the trigger shows “open”.
  2. Leave check. On mouseout, inspect relatedTarget.
  3. Contains. If still inside #menu-wrap, keep open.
  4. Outside. Otherwise treat it as a real leave and close.

Example 5 — Guard Against null

Leaving the browser window can make relatedTarget null.

jQuery
$("#box").on("mouseout", function (event) {
  if (!event.relatedTarget) {
    $("#out").text("relatedTarget is null (left document?)");
    return;
  }
  $("#out").text(
    "Entered: " + event.relatedTarget.nodeName
  );
});
Try It Yourself

How It Works

  1. Check first. Never call .nodeName on a possible null.
  2. Null path. Pointer left toward the chrome / outside the page.
  3. Element path. Safe to read nodeName (or wrap with $()).
  4. Habit. Always guard relatedTarget in production code.

Edge Cases & Pitfalls

Watch for these when using relatedTarget.

null

Can be null

Leaving or entering the document often yields null. Always check before reading properties.

events

Prefer mouseover / mouseout

relatedTarget is defined for those events. mouseenter / mouseleave are a weaker fit when you need the other element.

bubble

Child moves fire mouseout

mouseout bubbles and fires when moving between children. Use relatedTarget + $.contains (or switch to mouseleave) to ignore internal moves.

vs

Do not confuse with target

target is “this side” of the event; relatedTarget is “the other side.” They answer different questions.

Compatibility

Browser Support

event.relatedTarget is a jQuery event-object property (since 1.1.4). The underlying mouseover/mouseout related-target behavior is standard in modern browsers. Works wherever your loaded jQuery version runs.

✓ Stable · jQuery 1.1.4+

event.relatedTarget

Supported wherever jQuery 1.1.4+ is loaded. Prefer jQuery 3.x with .on("mouseover") / .on("mouseout") for modern code.

100% jQuery support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
event.relatedTarget 1.1.4+

Bottom line: Safe for production. Guard null, prefer mouseover/mouseout, and use $.contains for hover menus.

Analysis

Performance Notes

ApproachCostBest for
Read relatedTargetNegligibleAny mouseover/mouseout handler
$.contains(parent, rt)CheapMenu / widget leave checks
Logging every mouseoutCan be chattyDebug only — children fire often
Heavy DOM work on mouseoutCan stutterKeep leave handlers light

Reading relatedTarget is free. Cost comes from noisy mouseout on nested trees — filter with contains or prefer mouseleave when you do not need the other element.

Remember

Key Takeaways

  • Role: the other element in a mouseover / mouseout move.
  • Direction: mouseout → entering; mouseover → exiting.
  • vs target: target is this side; relatedTarget is the other.
  • Always guard: relatedTarget can be null.

One line: relatedTarget answers “which other element is involved in this pointer move?”

Frequently Asked Questions

event.relatedTarget is an Element on the jQuery event object. It is the other DOM element involved in the pointer move — for mouseout, the element being entered; for mouseover, the element being exited. Available since jQuery 1.1.4.
event.target is the element that received the event (often the deepest child under the pointer). event.relatedTarget is the other element in the transition — where the mouse came from or is going to.
Bind mouseout on anchors and read event.relatedTarget.nodeName — typically "DIV" when the pointer moves from the link into a sibling block element.
Prefer mouseover/mouseout when you need relatedTarget. mouseenter and mouseleave do not bubble and are a weaker fit for inspecting the adjacent element in all browsers.
Yes. When the pointer leaves the document (or enters from outside), relatedTarget may be null. Always guard with if (event.relatedTarget) before reading nodeName.
On mouseout of a trigger, check whether relatedTarget is still inside the menu container ($.contains or .closest). If the pointer moved into the panel, keep the menu open.

Next: event.result

Read the last non-undefined value returned by handlers on the same event.

event.result tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

jQuery event.pageY Property jQuery event.result Property