Check out this interactive example.
The demonstration includes a main div with 3 child divs. A click event is triggered on the main div, but instead of displaying alerts with the mouse position relative to the parent div as expected, it shows the position relative to the child div that was clicked.
const parent = document.getElementById('main');
parent.addEventListener('click', handleMouseClick);
function handleMouseClick(e) {
alert(e.offsetX, e.offsetY);
}
Desired behavior: Clicking on any child div should provide the click position relative to the parent div (#main).
Current issue: The offset values always reflect the position relative to the clicked child div, not #main.
What causes this discrepancy? Is there a solution to ensure accurate tracking of the mouse position in relation to the parent div, even when scrolling occurs?