js 获取鼠标位置|极客笔记

js 获取鼠标位置

在前端开发中，经常会有需要获取鼠标位置的需求，例如实现一个模拟游标跟随鼠标移动的效果、实现点击某个区域的功能等。本文将详细介绍如何使用JavaScript获取鼠标位置的方法，并给出相应的示例代码。

1. clientX 和 clientY属性

在JavaScript中，我们可以通过clientX和clientY属性来获取鼠标相对于浏览器窗口的位置。具体的代码如下所示：

document.addEventListener('mousemove', function(event) {
    var x = event.clientX;
    var y = event.clientY;
    console.log('鼠标当前位置：x=' + x + ', y=' + y);
});

上面的代码通过监听mousemove事件，实时获取鼠标的位置，并在控制台打印出来。你可以打开浏览器的开发者工具，在控制台中查看输出。

2. pageX 和 pageY属性

除了clientX和clientY属性外，还可以使用pageX和pageY属性来获取鼠标相对于文档页面的位置。这两个属性可以更加精确地获取鼠标的位置，因为它们会随着页面的滚动而改变。下面是使用pageX和pageY属性的示例代码：

document.addEventListener('mousemove', function(event) {
    var x = event.pageX;
    var y = event.pageY;
    console.log('鼠标当前位置：x=' + x + ', y=' + y);
});

同样地，你可以打开浏览器的开发者工具，在控制台中查看输出。

3. screenX 和 screenY属性

除了上述两种方法外，还可以使用screenX和screenY属性来获取鼠标相对于屏幕的位置。这两个属性可以用来获取鼠标在整个屏幕上的位置，不受页面滚动的影响。下面是使用screenX和screenY属性的示例代码：

document.addEventListener('mousemove', function(event) {
    var x = event.screenX;
    var y = event.screenY;
    console.log('鼠标当前位置：x=' + x + ', y=' + y);
});

同样地，你可以打开浏览器的开发者工具，在控制台中查看输出。