js 鼠标移动事件|极客笔记

js 鼠标移动事件

在网页开发中，鼠标移动事件是常见且重要的一种交互事件。通过监听鼠标移动事件，我们可以实现一些动态效果，如实时更新鼠标位置、悬停效果、拖拽功能等。在本文中，我们将详细介绍如何在JavaScript中使用鼠标移动事件，并给出一些实际的示例代码。

1. 概述

在JavaScript中，我们可以使用mousemove事件来监听鼠标移动。当用户在页面上移动鼠标时，浏览器会触发mousemove事件，并可以通过相应的事件处理函数来处理这个事件。在事件处理函数中，我们可以获取鼠标当前的坐标位置，并进行相应的操作。

2. 监听鼠标移动事件

要监听鼠标移动事件，我们可以使用addEventListener方法将事件处理函数绑定到对应的DOM元素上。下面是一个简单的示例，当鼠标在页面上移动时，将会在控制台输出鼠标的坐标位置：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse Move Event</title>
</head>
<body>
<script>
document.addEventListener('mousemove', function(event) {
    const x = event.clientX;
    const y = event.clientY;
    console.log(`Mouse position: x= ${x}, y=$ {y}`);
});
</script>
</body>
</html>

在上面的示例中，我们通过document.addEventListener('mousemove', handler)来监听整个文档的鼠标移动事件。当鼠标移动时，事件处理函数会被调用，并且event参数包含了鼠标的坐标位置信息，我们通过event.clientX和event.clientY来获取鼠标的横纵坐标。

3. 实时更新鼠标位置

通过监听鼠标移动事件，我们可以实现实时更新鼠标的位置，例如在页面上显示当前鼠标的坐标位置。下面是一个示例代码，当鼠标移动时，会在页面上显示当前鼠标的坐标位置：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Real-time Mouse Position</title>
</head>
<body>
<div id="mousePosition"></div>
<script>
const mousePosition = document.getElementById('mousePosition');

document.addEventListener('mousemove', function(event) {
    const x = event.clientX;
    const y = event.clientY;
    mousePosition.innerText = `Mouse position: x= ${x}, y=$ {y}`;
});
</script>
</body>
</html>

在上面的示例中，我们通过一个<div>元素来显示鼠标的坐标位置，通过mousePosition.innerText来更新显示内容。当鼠标移动时，事件处理函数会被调用，更新鼠标坐标的显示内容。

4. 悬停效果

鼠标移动事件也常用于实现悬停效果，例如当鼠标悬停在一个元素上时，会触发特定的样式改变。下面是一个示例代码，当鼠标悬停在一个<div>元素上时，改变元素的背景颜色：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Effect</title>
<style>
#hoverDiv {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    transition: background-color 0.5s;
}
</style>
</head>
<body>
<div id="hoverDiv"></div>
<script>
const hoverDiv = document.getElementById('hoverDiv');

hoverDiv.addEventListener('mouseenter', function() {
    hoverDiv.style.backgroundColor = 'lightgreen';
});

hoverDiv.addEventListener('mouseleave', function() {
    hoverDiv.style.backgroundColor = 'lightblue';
});
</script>
</body>
</html>

在上面的示例中，当鼠标悬停在<div>元素上时，会触发mouseenter事件，我们在事件处理函数中改变元素的背景颜色。当鼠标移出元素时，会触发mouseleave事件，恢复原来的背景颜色。

5. 拖拽功能

除了悬停效果，鼠标移动事件还可以用于实现拖拽功能。下面是一个示例代码，实现一个简单的拖拽功能，当点击并拖动一个<div>元素时，可以移动该元素到新的位置：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop</title>
<style>
#dragDiv {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    position: absolute;
}
</style>
</head>
<body>
<div id="dragDiv"></div>
<script>
const dragDiv = document.getElementById('dragDiv');
let isDragging = false;
let offsetX, offsetY;

dragDiv.addEventListener('mousedown', function(event) {
    isDragging = true;
    offsetX = event.offsetX;
    offsetY = event.offsetY;
});

document.addEventListener('mousemove', function(event) {
    if (isDragging) {
        const x = event.clientX - offsetX;
        const y = event.clientY - offsetY;
        dragDiv.style.left = x + 'px';
        dragDiv.style.top = y + 'px';
    }
});

document.addEventListener('mouseup', function() {
    isDragging = false;
});
</script>
</body>
</html>

在上面的示例中，当鼠标点击并拖动<div>元素时，会触发mousedown事件，接着在鼠标移动时更新元素的位置，在鼠标释放时停止拖拽。