仅在鼠标按下和鼠标同时移动时显示屏幕坐标

Question

Objective - 仅当事件 mousedown 和 mousemove 同时发生时才显示 screenX 和 screenY 坐标。当鼠标按钮被释放时，mousemove 事件应该停止，坐标保持原样。

问题 - 即使当我释放鼠标按钮时，mousemove 事件仍然处于活动状态并且坐标会随着鼠标移动而变化。

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>

Answer 1

您可以使用mousedown和mouseup事件来设置一个布尔值，只有当鼠标移动并且这个布尔值为真时才更新坐标：

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>

仅在鼠标按下和鼠标同时移动时显示屏幕坐标

Showing Screen Coordinates ONLY on Mouse Down and Mouse Move Simultaneously

javascript

addeventlistener