Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM MouseEvent relatedTarget
The HTML DOM MouseEvent relatedTarget property returns the element that the mouse was previously on or is moving to during mouse events. It is primarily used with mouseover and mouseout events to determine which element triggered the event transition.
When a mouseover event occurs, relatedTarget refers to the element the mouse came from. When a mouseout event occurs, relatedTarget refers to the element the mouse is moving to.
Syntax
Following is the syntax to access the relatedTarget property −
MouseEventObject.relatedTarget
Return Value
The relatedTarget property returns an Element object representing the related element, or null if there is no related element (such as when the mouse enters from outside the browser window).
Common Use Cases
The relatedTarget property is commonly used in the following scenarios −
Dropdown menus − To keep menus open when moving between parent and child elements
Hover effects − To prevent unwanted animations when moving within grouped elements
Tooltip positioning − To determine the direction of mouse movement for better tooltip placement
Game development − To track mouse movement between different game areas
Example − Basic MouseEvent relatedTarget
Following example demonstrates how relatedTarget works with mouseout events −
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent relatedTarget Example</title>
<style>
.container {
width: 300px;
height: 200px;
background-color: lightblue;
border: 2px solid blue;
margin: 20px auto;
padding: 20px;
text-align: center;
}
.inner-box {
width: 150px;
height: 100px;
background-color: lightcoral;
border: 2px solid red;
margin: 20px auto;
line-height: 100px;
}
#output {
margin: 20px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
min-height: 50px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="container" id="container" onmouseout="showRelatedTarget(event)">
Blue Container
<div class="inner-box" id="innerBox">Red Box</div>
</div>
<div id="output">Move your mouse in and out of the boxes to see relatedTarget...</div>
<script>
function showRelatedTarget(event) {
const output = document.getElementById('output');
const relatedElement = event.relatedTarget;
if (relatedElement) {
output.innerHTML = `Mouse moved from "${event.target.id || event.target.className}" to "${relatedElement.id || relatedElement.className || relatedElement.tagName}"`;
} else {
output.innerHTML = `Mouse moved from "${event.target.id || event.target.className}" to outside the browser window`;
}
}
</script>
</body>
</html>
Move your mouse between the blue container and red box to see how relatedTarget identifies the destination element −
Blue Container Red Box Mouse moved from "container" to "innerBox" (or vice versa based on movement)
Example − Interactive Game Area
Following example shows a more complex use case with multiple areas −
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent relatedTarget Game</title>
<style>
.game-container {
width: 400px;
margin: 20px auto;
text-align: center;
border: 2px solid black;
padding: 10px;
}
.safe-zone {
width: 100%;
height: 60px;
background-color: #28a745;
margin: 5px 0;
line-height: 60px;
color: white;
font-weight: bold;
}
.danger-zone {
width: 100%;
height: 60px;
background-color: #dc3545;
margin: 5px 0;
line-height: 60px;
color: white;
font-weight: bold;
}
.status {
padding: 15px;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
margin-top: 10px;
min-height: 30px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="game-container">
<h3>Mouse Navigation Game</h3>
<div class="danger-zone" id="danger1" onmouseout="checkMovement(event)">DANGER ZONE 1</div>
<div class="safe-zone" id="safe" onmouseout="checkMovement(event)">SAFE ZONE</div>
<div class="danger-zone" id="danger2" onmouseout="checkMovement(event)">DANGER ZONE 2</div>
<div class="status" id="status">Move your mouse between the zones...</div>
</div>
<script>
function checkMovement(event) {
const status = document.getElementById('status');
const currentElement = event.target;
const relatedElement = event.relatedTarget;
if (!relatedElement) {
status.innerHTML = 'Mouse left the game area';
return;
}
const currentId = currentElement.id;
const relatedId = relatedElement.id;
if (currentId === 'safe' && (relatedId === 'danger1' || relatedId === 'danger2')) {
status.innerHTML = '?? Warning! Moving from SAFE to DANGER zone!';
status.style.backgroundColor = '#fff3cd';
} else if ((currentId === 'danger1' || currentId === 'danger2') && relatedId === 'safe') {
status.innerHTML = '? Good! Moving from DANGER to SAFE zone!';
status.style.backgroundColor = '#d4edda';
} else {
status.innerHTML = `Moved from ${currentId} to ${relatedId}`;
status.style.backgroundColor = '#f8f9fa';
}
}
</script>
</body>
</html>
The game provides feedback based on mouse movement between safe and danger zones using the relatedTarget property −
Mouse Navigation Game DANGER ZONE 1 SAFE ZONE DANGER ZONE 2 Status messages appear based on mouse movement between zones
Example − Preventing Event Bubbling
Following example shows how to use relatedTarget to prevent unwanted effects during event bubbling −
<!DOCTYPE html>
<html>
<head>
<title>relatedTarget Event Bubbling</title>
<style>
.parent {
width: 300px;
height: 200px;
background-color: lightblue;
border: 3px solid blue;
margin: 20px auto;
padding: 20px;
position: relative;
}
.child {
width: 150px;
height: 80px;
background-color: lightgreen;
border: 2px solid green;
position: absolute;
top: 50px;
left: 50px;
text-align: center;
line-height: 80px;
}
.info {
margin: 20px auto;
padding: 15px;
width: 300px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="parent" id="parent" onmouseout="handleMouseOut(event)">
Parent Element
<div class="child" id="child">Child Element</div>
</div>
<div class="info" id="info">Hover over the elements to see smart event handling...</div>
<script>
function handleMouseOut(event) {
const info = document.getElementById('info');
const parent = document.getElementById('parent');
const relatedTarget = event.relatedTarget;
// Check if the mouse is still within the parent element or its children
if (relatedTarget && parent.contains(relatedTarget)) {
info.innerHTML = 'Mouse moved within parent area - no action needed';
info.style.backgroundColor = '#d4edda';
} else {
info.innerHTML = 'Mouse truly left the parent area - triggering cleanup actions';
info.style.backgroundColor = '#f8d7da';
}
}
</script>
</body>
</html>
This example demonstrates how relatedTarget helps distinguish between true element exits and internal movements −
Parent Element Child Element Different messages appear based on whether mouse truly leaves parent or moves internally
Browser Compatibility
The relatedTarget property is widely supported across modern browsers. However, there are a few considerations −
Internet Explorer − Older versions (IE8 and below) use
fromElementandtoElementproperties instead ofrelatedTargetTouch devices −
relatedTargetmay benullon touch events since there's no concept of "hovering"Security restrictions −
relatedTargetmay benullwhen crossing certain security boundaries
Key Points
Use
relatedTargetto determine the element involved in mouse transition eventsAlways check if
relatedTargetis notnullbefore accessing its propertiesThe property is most useful with
mouseoverandmouseouteventsUse
contains()method to check parent-child relationships when preventing unwanted event bubbling
Conclusion
The MouseEvent relatedTarget property is essential for
152 Views
