relatedTarget是JavaScript鼠标事件的一个属性，表示次要目标。在mouseover事件中，它指向移入元素的来源；在mouseout事件中，它指向移出元素的目标。如果无次要目标，则返回null。例如，当在嵌套的div元素(A包含B)之间移动时，relatedTarget可以帮助识别鼠标是从外部移入还是在内部移动。
relatedTarget 是鼠标事件的“次要目标”，
如果事件是鼠标移入事件则relatedTarget指向移入该元素的来源“元素”，
如果事件是鼠标移出事件则relatedTarget指向移出该元素的目标“元素”。
如果事件没有次要目标，relatedTarget 将返回 null。
举个例子：
<body id="C">
<div id="A">
<div id="B"></div>
</div>
</body>
先写一个嵌套div C内嵌A内嵌B
<script>
var A = document.getElementById('A');
A.addEventListener('mouseover', function(e) {
var related = e.relatedTarget;
if (!A.contains(related)) {
console.log('鼠标从外部移入主要目标元素A');
} else {
console.log('鼠标在主要目标元素A内部移动');
}
});
</script>
再写js，我们先获取A，再对A添加事件监听器，监听'mouseover'鼠标移入事件。
在监听器里通过var related = e.relatedTarget;获取“次要目标”。
因为我们是对A设置的EventListener，所以发生事件里A是主要目标：
如果鼠标指针是从A移入的B，则在这个事件里面B为次要目标，var related 的值是B元素也就是最内部的div，
如果是从B移入的A，B仍为次要目标，var related 的值还是B元素；
如果是从C移入的A，在这个事件里面C为次要目标，var related 的值是C元素也就是body，
但如果是从A移入的C，正确的说是从A移出C，此时无次要目标，var related 的值是null。
那此时if判断语句判断结果：
鼠标指针在AB之间的移动是 '鼠标在主要目标元素A内部移动'，
鼠标指针由C移动到A是 '鼠标从外部移入主要目标元素A'，
鼠标指针由A移动到C，则不会提示
扫一扫
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
