1

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

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>

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




введите сюда описание изображения

2
  • 1
    присмотритесь к методу Element.getBoundingClientRect() Commented 23 авг. 2020 в 20:55
  • мой ответ с getBoundingClientRect -- ниже Commented 23 авг. 2020 в 22:46

3 ответа 3

5

Чтобы получить координаты внутри элемента, нужно из абсолютных координат мыши (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>

9
  • "topPos is the number of pixels from the top of the closest relatively positioned parent" -- если в оно внутри relative -- не сработает Commented 23 авг. 2020 в 21:12
  • @SergeiKirjanov, для данного примера - это не важно
    – Grundy
    Commented 23 авг. 2020 в 21:18
  • @Grundy, вопрос по поводу твоего ответа, как исправить отрицательные координаты? Добавил скриншот в вопрос
    – kertAW
    Commented 23 авг. 2020 в 21:25
  • @Voprositel, а зачем их исправлять? В добавок к рисунку добавь в вопрос и разметку со стилями и кодом, для которой можно получить подобные результаты
    – Grundy
    Commented 23 авг. 2020 в 21:27
  • @Grundy, мне нужны координаты от верхнего левого угла начиная с нуля для вычислений, хотя, возможно я просто не догоняю
    – kertAW
    Commented 23 авг. 2020 в 21:29
1

Вариант на 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>

4
  • поправь пример, чтобы разница была видна
    – Grundy
    Commented 23 авг. 2020 в 21:44
  • я имел ввиду, стили, чтобы было видно, что в одном случае одно значение показывает, а в твоем другое
    – Grundy
    Commented 23 авг. 2020 в 21:50
  • ты пишешь вариант, который не зависит от relative - и в примере ни одного relative
    – Grundy
    Commented 23 авг. 2020 в 21:51
  • @Grundy, добавил Commented 23 авг. 2020 в 22:23
0

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

1
  • добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 6 сент. 2022 в 9:18

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.