const $test = document.querySelector('.test'); function sleep() { return new Promise(resolve => { setTimeout(() => { resolve(); }, 300); }); } $test.addEventListener('mousedown', async e => { console.log(e.offsetX, e.offsetY); // (90, 163) any other values but not 0 await sleep(); console.log(e.offsetX, e.offsetY); // 0 0 });

 #app { position: relative; width: 100vw; height: 100vh; } .test { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; background-color: aqua; }

 <div id="app"> <div class="test"></div> <!-- <canvas width="300" height="300" class="test"></canvas> --> </div>