获取鼠标当前位置是开发中常需要用到的功能之一。JavaScript可以轻松实现该操作。以下是获取鼠标当前位置的完整攻略。
获取鼠标当前位置的方式
常用的方式是利用鼠标移动事件，不断获取鼠标当前位置的横纵坐标。可以用鼠标移动事件mousemove来实现。
实现代码
下面是一个基本的 JavaScript 实现：
document.addEventListener('mousemove', function(e) {
console.log('X轴坐标:', e.clientX, 'Y轴坐标:', e.clientY);
});
代码说明：
document绑定了mousemove事件，该事件在鼠标移动时会触发- 回调函数中，使用
console.log()打印出鼠标当前位置的横纵坐标
示例1：鼠标位置跟随
下面的示例展示了如何利用上述方法，让一个图片跟随鼠标移动。
<!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上- 获取鼠标当前位置的横纵坐标
- 获取图片所在父元素（盒子）的左上角位置，计算出图片相对于盒子的位置
- 将图片位置设置为相对于盒子的位置
示例2：鼠标位置划线
下面的示例展示了如何利用上述方法，获取鼠标轨迹，绘制轨迹图形。
<!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就能实现各种各样的效果，比如跟随、绘制等等。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现获取鼠标当前的位置 - Python技术站
微信扫一扫 
支付宝扫一扫 