📅 最后修改于: 2023-12-03 15:11:52.039000 🧑 作者: Mango
在 JavaScript 中，可以通过 mouseover 和 mouseout 事件来检测鼠标的移动，并通过获取事件对象的 target 属性来获取当前悬停的元素。
在处理鼠标事件时，会自动传递一个事件对象作为参数。在这个事件对象中，我们可以获取到鼠标位置以及当前悬停的元素等信息。
我们可以通过 event.target 属性来获取当前悬停的元素，并将其保存在一个变量中以供后续操作。
document.addEventListener('mouseover', function(event) {
var hoveredElement = event.target;
// do something with hoveredElement
});
我们还可以通过监听 mousemove 事件来实时获取鼠标的位置信息，从而实现更加精确的悬停元素检测。
document.addEventListener('mousemove', function(event) {
var mouseX = event.clientX;
var mouseY = event.clientY;
// do something with mouseX and mouseY
});
下面是一个简单的示例，演示了如何通过 mouseover 事件获取悬停元素，并实时显示出当前悬停的元素的标签名。
<!DOCTYPE html>
<html>
<head>
<title>Hover Element Example</title>
</head>
<body>
<div id="target">
<p>Hover over this element</p>
</div>
<script>
var targetElement = document.getElementById('target');
targetElement.addEventListener('mouseover', function(event) {
var hoveredElement = event.target;
console.log('Hovered element:' + hoveredElement.tagName);
});
</script>
</body>
</html>
以上代码将在控制台中输出当前悬停的元素的标签名。
通过监听鼠标事件，我们可以轻松地实现悬停元素的检测，并通过获取事件对象的 target 属性来获取当前悬停的元素。