Objetivo: mostrar las coordenadas screenX y screenY solo cuando los eventos mousedown y mousemove simultáneamente. Cuando se suelta el botón del mouse, el evento mousemove debe detenerse, dejando las coordenadas como están.
Problema: incluso cuando suelto el botón del mouse, el evento mousemove aún está activo y las coordenadas cambian a medida que se mueve el mouse.
let xPosition = document.getElementById("x") let yPosition = document.getElementById("y") addEventListener('mousedown', (e) => { console.log(e.type) moveMouse(e.type) }) addEventListener('mouseup', (e) => { moveMouse(e.type) }) function moveMouse(e) { if (e === 'mousedown') { addEventListener('mousemove', (event) => { xPosition.textContent = `X: ${event.screenX}` yPosition.textContent = `Y: ${event.screenY}` }) } if (e === 'mouseup') { removeEventListener('mousemove', () => { console.log('move mouse event removed.') }) } } .coordinate-container { position: absolute; justify-content: center; align-items: center; display: flex; flex-direction: row; top: 0; left: 0; width: 150px; height: 150px; background-color: blue; } .coordinate-container #x, .coordinate-container #y { width: 100%; height: 75px; color: white } <body> <div class="coordinate-container"> <div id="x"></div> <div id="y"></div> </div> <script src="script.js"></script> </body>Puede usar los eventos mousedown y mouseup para establecer un booleano y solo actualizar las coordenadas cuando el mouse se haya movido y este booleano sea verdadero:
let xPosition = document.getElementById("x") let yPosition = document.getElementById("y") let mouseDown = false; addEventListener('mousemove', (event) => { if (mouseDown) { xPosition.textContent = `X: ${event.screenX}` yPosition.textContent = `Y: ${event.screenY}` } }); addEventListener('mousedown', () => mouseDown = true); addEventListener('mouseup', () => mouseDown = false); .coordinate-container { position: absolute; justify-content: center; align-items: center; display: flex; flex-direction: row; top: 0; left: 0; width: 150px; height: 150px; background-color: blue; } .coordinate-container #x, .coordinate-container #y { width: 100%; height: 75px; color: white } <body> <div class="coordinate-container"> <div id="x"></div> <div id="y"></div> </div> <script src="script.js"></script> </body>