Black friday

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

jQuery relatedTarget: Track the Movements In or Out of Elements

Reading time 1 min
Published Jan 2, 2018
Updated Sep 25, 2019

jQuery relatedTarget: Main Tips

  • The event.relatedTarget property tracks cursor movements to determine when an element is being entered or exited.
  • This property is related to jQuery mouse events.
  • The jQuery relatedTarget property returns the element being entered/exited as the cursor moves.

Usage of event.relatedTarget

By tracking the cursor movements across a page, the event.relatedTarget property specifies which element is entered or exited. The results depend on whether it is a mouseover (exiting element) or a mouseout (entering element) event.

Example
$("div, p").mouseenter((event) => {
   $("#message").html("Related target is: " + event.relatedTarget.nodeName);
});

The example above reveals the usage of event.relatedTarget. Moving your cursor around and causing jQuery mouse events, you will see that the related target will be indicated.