Узнать координаты мыши относительно блока

Question

Столкнулся с такой проблемой: надо получить координаты мыши относительно блока, на котором она находится.

const div = document.querySelector('div');

div.addEventListener('mousemove', (e) => {
  let x = e.clientX,
    y = e.clientY;
  console.log(`${x}:${y}`);
}, {
  capture: true
})

div {
  border: 2px solid #000;
  width: 500px;
  height: 500px;
}

<div>daw</div>

Пытался так, но понятно дело, что не получилось.

Answer 1

Чтобы получить координаты внутри элемента, нужно из абсолютных координат мыши (pageY, pageX) вычесть смещение самого элемента. Получить его можно с помощью методов .offsetLeft и .offsetTop

let div = document.querySelector('#f');

div.addEventListener('mousemove', (e) => {
  let x = e.pageX,
    y = e.pageY;

  console.log(`${x - div.offsetLeft}:${y-div.offsetTop}`);
}, {
  capture: true
})

div#a {
  margin-top: 100px;
  padding-top: 100px;
  border: 2px solid #0f0;
}

div#f {
  border: 2px solid #000;
  width: 500px;
  height: 500px;
}

<div id="a">
  <div id="f">daw</div>
</div>

Answer 2

Вариант на getBoundingClientRect и event.clientX, который не зависит от relative.

offsetLeft считается от ближайшего предка с position relative.

У clientX и pageX разное поведение при скроле.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title> позиция мыши </title>
<style>

div#a {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 350px;
  height: 350px;
  border: 2px solid #0f0;
}
div#b {
  position: relative;
}
div#f {
  border: 2px solid #000;
  position: absolute;
  top: 50px;
  left: 50px;
  width: 250px;
  height: 250px;
  cursor: pointer;
}

</style>
</head>
<body>
<div id="a"><div id="b"><div id="f">0</div></div></div>
<script>

const div = document.querySelector('#f');
window.addEventListener('mousemove', (ev) => {
  const rect = div.getBoundingClientRect()
  console.log(` + ${ev.clientX - rect.left}:${ev.clientY - rect.top}    ----------    ${ev.pageX - div.offsetLeft}:${ev.pageY - div.offsetTop}`);
}, {
  capture: true
})

</script>
</body>
</html>

Answer 3

document.querySelector('.class').addEventListener('mousemove',e=>console.log([e.toElement,e.offsetX])) // console.log

document.querySelector('.class').addEventListener('mousemove',e=>{e.toElement.className == document.querySelector('.class').className ? console.log(e.offsetX) : false})

БЛОГ НА HUSL

Узнать координаты мыши относительно блока

Ответы (3 шт):