Как получить координаты курсора относительно блока, не учитывая дочерних элементов?

Question

[kirillon37]

Есть блок, относительно которого мне необходимы координаты курсора. В этом блоке есть еще дочерние элементы. Я пытался написать код, который будет собирать координаты, но почему то когда курсор находится на дочернем элементе координаты курсора становятся относительно уже дочернего элемента, а не родительского, который мне необходим. В блоке с классом .card распологаются дочерние элементы.

const card = document.querySelector('.container');
const cardItm = document.querySelector('.card');
const halfHeight = card.offsetHeight / 2;
const halfWidth = card.offsetHeight / 2;

card.addEventListener('mousemove', startRotate);
card.addEventListener('mouseout', stopRotate);

function startRotate(event) {
	cardItm.style.transform = `rotateX(${-(event.offsetY - halfHeight) / 20}deg) rotateY(${(event.offsetX - halfWidth) / 20}deg)`;
};

function stopRotate(event) {
	cardItm.style.transform = 'rotateX(0)';
};

Answer 1

[generate]

Лучше брать координаты от всего документа где находится курсор и отнимать с него ширину или высоту блока
event.clientY - card.getBoundingClientRect().top

const card = document.querySelector('.container');
const cardItm = document.querySelector('.card');
const halfHeight = card.offsetHeight / 2;
const halfWidth = card.offsetHeight / 2;

card.addEventListener('mousemove', startRotate);
card.addEventListener('mouseout', stopRotate);

function startRotate() {
  cardItm.style.transform = `rotateX(${-((event.clientY - card.getBoundingClientRect().top) - halfHeight) / 20}deg) rotateY(${((event.clientX - card.getBoundingClientRect().left) - halfWidth) / 20}deg)`;
};

function stopRotate(event) {
  cardItm.style.transform = 'rotateX(0)';
};