在前端开发中,你可以使用JavaScript的mouseevent
对象来获取鼠标的坐标。这通常在事件监听器中使用,如mousemove
,click
等事件。以下是一个简单的例子,展示了如何在mousemove
事件中获取鼠标的坐标:
// 获取用于显示鼠标坐标的元素
var coordElement = document.getElementById('coordinates');
// 为整个文档添加mousemove事件监听器
document.addEventListener('mousemove', function(event) {
// event.clientX 和 event.clientY 分别返回鼠标相对于浏览器窗口可视区的 X,Y 坐标,它们不考虑任何页面滚动
var x = event.clientX;
var y = event.clientY;
// 显示坐标
coordElement.innerHTML = 'X: ' + x + ', Y: ' + y;
});
在这个例子中,你需要有一个HTML元素(如一个<div>
或<span>
)来显示鼠标的坐标,其id为coordinates
。当然,你可以根据需要修改这部分。
另外,如果你想要获取鼠标相对于整个文档(包括滚动的部分)的坐标,你可以使用event.pageX
和event.pageY
。这两个属性返回的是鼠标相对于整个文档的坐标,考虑了页面的滚动。以下是如何使用它们的例子:
document.addEventListener('mousemove', function(event) {
var x = event.pageX;
var y = event.pageY;
coordElement.innerHTML = 'X: ' + x + ', Y: ' + y;
});
标签:鼠标,mousemove,获取,坐标,var,js,event
From: https://www.cnblogs.com/ai888/p/18685029