在鼠标事件中，relatedTarget 通常用于指定与事件相关的元素。例如，在 mouseout 事件中，relatedTarget 表示鼠标离开的目标元素。而在 mouseover 事件中，它表示鼠标进入的目标元素。
以下是一个简单的示例，演示了 relatedTarget 在 mouseout 事件中的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>relatedTarget Example</title>
<style>
div {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 50px;
}
</style>
</head>
<body>
<div id="myDiv">Hover over me</div>
<script>
var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mouseout', function(event) {
var relatedTarget = event.relatedTarget;
if (relatedTarget) {
console.log('Mouse left the div and entered: ', relatedTarget.tagName);
} else {
console.log('Mouse left the div but no related target.');
}
});
</script>
</body>
</html>
在这个例子中，当鼠标移出 myDiv 元素时，会触发 mouseout 事件，并通过 relatedTarget 获取鼠标进入的目标元素。如果鼠标移出页面而没有进入新的元素，则 relatedTarget 为 null。
转载请注明出处：http://www.pingtaimeng.com/article/detail/6253/JavaScript 和 HTML DOM