JS 鼠标相对于元素的位置

在前端开发中，经常需要获取鼠标相对于某个元素的位置。这个位置信息可以用于实现各种交互效果，比如拖拽、自定义鼠标样式等等。

一、事件对象

在处理鼠标事件时，我们可以获取事件对象，这个对象包含了一些有用的属性，比如：

• clientX：鼠标相对于浏览器窗口左上角的位置（不包括滚动条）。
• clientY：鼠标相对于浏览器窗口左上角的位置（不包括滚动条）。
• pageX：鼠标相对于整个文档左上角的位置。
• pageY：鼠标相对于整个文档左上角的位置。
• screenX：鼠标相对于屏幕左上角的位置。
• screenY：鼠标相对于屏幕左上角的位置。

示例代码：

document.addEventListener('mousemove', function(e) {
  console.log('clientX:', e.clientX);
  console.log('clientY:', e.clientY);
  console.log('pageX:', e.pageX);
  console.log('pageY:', e.pageY);
  console.log('screenX:', e.screenX);
  console.log('screenY:', e.screenY);
});

二、元素位置

要想得到鼠标相对于某个元素的位置，我们需要先获取该元素的位置信息，然后再用事件对象的位置信息计算出相对位置。

要获取元素的位置信息，可以使用 getBoundingClientRect() 方法。这个方法返回一个包含四个属性的对象：top、right、bottom、left。它们表示元素相对于浏览器视口的位置。

示例代码：

var box = document.getElementById('box');
var boxRect = box.getBoundingClientRect();
console.log('top:', boxRect.top);
console.log('right:', boxRect.right);
console.log('bottom:', boxRect.bottom);
console.log('left:', boxRect.left);

三、相对位置

有了元素和鼠标的位置信息，我们就可以计算出鼠标相对于元素的位置了。公式如下：

var x = e.clientX - boxRect.left;
var y = e.clientY - boxRect.top;

其中 e 是事件对象，boxRect 是元素位置信息。

完整示例代码：

var box = document.getElementById('box');
var boxRect = box.getBoundingClientRect();

box.addEventListener('mousemove', function(e) {
  var x = e.clientX - boxRect.left;
  var y = e.clientY - boxRect.top;
  console.log('x:', x);
  console.log('y:', y);
});

以上就是获取鼠标相对于元素的位置的方法。在实际的开发中，我们需要对坐标进行进一步的处理和转换，以适应不同的需求。