📜  js 鼠标相对于元素的位置 - Javascript (1)

📅  最后修改于: 2023-12-03 15:02:25.591000             🧑  作者: Mango

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() 方法。这个方法返回一个包含四个属性的对象:toprightbottomleft。它们表示元素相对于浏览器视口的位置。

示例代码:

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);
});

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