Координаты мыши внутри div не зависимо от окна браузера

100
18 февраля 2022, 08:20

Как можно узнать координаты курсора мыши, относительно div, а вернее внутри него?
Потому что если использовать clientX/clientY или pageX/pageY, то стоит изменить размер окна браузера и будут другие значения, соответственно, функционал работать не будет.
Или же у другого человека расширение монитора больше и все, функционал не работает.

Answer 1

Узнать координаты блока, из pageX вычесть их - получится относительно блока.

let div = document.querySelector('.coor-demo'); 
let divRect = div.getBoundingClientRect(); 
 
console.log( JSON.stringify( divRect ) ); 
 
div.addEventListener('mousemove', function(e){ 
  let relX = e.pageX - divRect.left; 
  let relY = e.pageY - divRect.top; 
   
  this.textContent = ` 
    relX: ${ relX }, absX: ${ e.pageX } 
    relY: ${ relY }, absY: ${ e.pageY } 
  `; 
}); 
 
/* Перезапись координатов блока при изменении размеров окна */ 
window.addEventListener('resize', function(){ 
  divRect = div.getBoundingClientRect(); 
});
.coor-demo { 
  width: 300px; 
  height: 150px; 
  background-color: orange; 
  margin: 25px; 
  padding: 5px; 
  user-select: none; 
  white-space: pre-line; 
}
<div class="coor-demo"></div>

Answer 2

Если вам не нужно поддерживать совсем старые браузеры, то можно использовать свойства offsetX и offsetY события передвижения мыши.

Can I use

let div = document.querySelector('.coor-demo'); 
 
div.addEventListener('mousemove', function(e) { 
 
  this.textContent = ` 
    relX: ${ e.offsetX }, absX: ${ e.pageX } 
    relY: ${ e.offsetY }, absY: ${ e.pageY } 
  `; 
});
.coor-demo { 
  width: 300px; 
  height: 150px; 
  background-color: orange; 
  margin: 25px; 
  padding: 5px; 
  user-select: none; 
  white-space: pre-line; 
}
<div class="coor-demo"></div>

READ ALSO
Привести в верхний регистр

Привести в верхний регистр

Существует некая строка, предположим "RqaEzty", которую требуется вывести в таком формате: "R-Qq-Aaa-Eeee-Zzzzz-Tttttt-Yyyyyyy" Код ниже выводит в таком: "R-qq-aaa-eeee-zzzzz-tttttt-yyyyyyy"...

89
Как обновлять значения в массиве?

Как обновлять значения в массиве?

Есть массив: img Есть два метода: 1getBlueImg 2

76
Как вывести определенные свойства из массива объектов. JS

Как вывести определенные свойства из массива объектов. JS

Подскажите пожалуйста, у меня есть массив объектов, допустим:

171
exe, dl - защита

exe, dl - защита

у меня клинт-серверное ПО клиент GUI, хочу его и защититьчтобы они не расковыряли-не поломали короче 2D игрушка

70