获取鼠标当前位置是开发中常需要用到的功能之一。JavaScript可以轻松实现该操作。以下是获取鼠标当前位置的完整攻略。
常用的方式是利用鼠标移动事件，不断获取鼠标当前位置的横纵坐标。可以用鼠标移动事件mousemove来实现。
下面是一个基本的 JavaScript 实现：
document.addEventListener('mousemove', function(e) {
console.log('X轴坐标:', e.clientX, 'Y轴坐标:', e.clientY);
});
代码说明：
document 绑定了 mousemove 事件，该事件在鼠标移动时会触发console.log() 打印出鼠标当前位置的横纵坐标下面的示例展示了如何利用上述方法，让一个图片跟随鼠标移动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标位置跟随</title>
<style>
#box {
position: relative;
height: 300px;
width: 500px;
margin: 100px auto;
}
#image {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="box">
<img id="image" src="image.png" alt="Image">
</div>
<script>
var image = document.getElementById('image');
document.addEventListener('mousemove', function(e) {
var x = e.clientX;
var y = e.clientY;
var box = document.getElementById('box');
var boxX = box.offsetLeft;
var boxY = box.offsetTop;
var imageX = x - boxX;
var imageY = y - boxY;
image.style.left = imageX + 'px';
image.style.top = imageY + 'px';
});
</script>
</body>
</html>
示例代码说明：
mousemove 事件被绑定在 document 上下面的示例展示了如何利用上述方法，获取鼠标轨迹，绘制轨迹图形。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标位置划线</title>
<style>
#box {
height: 300px;
width: 500px;
margin: 100px auto;
border: 1px solid #ccc;
position: relative;
}
#canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="box">
<canvas id="canvas"></canvas>
</div>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var box = document.getElementById('box');
canvas.width = box.clientWidth;
canvas.height = box.clientHeight;
var isDrawing = false;
document.addEventListener('mousemove', function(e) {
if (isDrawing) {
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke();
}
});
canvas.addEventListener('mousedown', function(e) {
isDrawing = true;
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
});
canvas.addEventListener('mouseup', function(e) {
isDrawing = false;
});
</script>
</body>
</html>
示例代码说明：
mousemove 事件被绑定在 document 上mousedown 和 mouseup 事件用来控制画线动作的开始和结束使用 JavaScript 获取鼠标当前位置非常简单。只要理解了获取鼠标当前位置的方式，利用JavaScript就能实现各种各样的效果，比如跟随、绘制等等。
本文链接：http://task.lmcjl.com/news/9348.html