如何在元素上获得相对位置鼠标点击

在开发前端页面时，经常需要在元素上监听鼠标事件。在监听到鼠标点击事件后，有时需要获取鼠标点击位置相对于元素的位置信息。本篇文章将介绍如何在元素上获得相对位置鼠标点击的方法。

1. 使用事件对象的 offsetX 和 offsetY 属性

在鼠标点击事件的回调函数中，可以通过事件对象的 offsetX 和 offsetY 属性获取鼠标点击相对于元素的位置。

<div id="box" style="width: 100px;height: 100px;background-color: #ccc;"></div>
<script>
  var box = document.getElementById('box');
  box.addEventListener('click', function(event) {
    var offsetX = event.offsetX;
    var offsetY = event.offsetY;

    console.log('offsetX:', offsetX, 'offsetY:', offsetY);
  });
</script>

通过这种方法获取到的 offsetX 和 offsetY 值分别表示鼠标点击位置相对于元素左上角的水平和垂直距离。

2. 使用 getBoundingClientRect() 方法

除了使用事件对象的 offsetX 和 offsetY 属性外，还可以使用元素节点的 getBoundingClientRect() 方法获取元素的位置信息，再计算鼠标点击位置相对于元素的位置。

<div id="box" style="width: 100px;height: 100px;background-color: #ccc;"></div>
<script>
  var box = document.getElementById('box');
  box.addEventListener('click', function(event) {
    var rect = box.getBoundingClientRect();
    var x = event.clientX - rect.left;
    var y = event.clientY - rect.top;

    console.log('x:', x, 'y:', y);
  });
</script>

getBoundingClientRect() 方法返回一个 DOMRect 对象，包含了元素的位置信息，包括元素的左上角、右下角坐标等。通过计算鼠标点击位置相对于元素左上角的距离，可以得到相对位置。

总结

通过以上两种方式，都可以在元素上获得相对位置鼠标点击。使用事件对象的 offsetX 和 offsetY 属性更加简单，但是需要注意的是它们只能在事件回调函数内部使用。而使用 getBoundingClientRect() 方法可以在事件回调函数之外的其他位置使用。具体使用哪种方式视情况而定。