按住鼠标按键时如何获取实时的鼠标坐标位置

原有代码的问题在于：mousedown 事件触发时传入的事件对象 e 是触发点击瞬间的静态快照，对象内的坐标属性不会随鼠标移动更新，所以定时器里读取的一直是初始点击位置的坐标。

推荐实现方式（性能最优） #

不需要定时器轮询，直接通过mousemove事件实时获取最新坐标，仅在鼠标按下时处理数据即可：

• 用变量标记鼠标是否处于按下状态
• mousemove事件触发时会自动传入包含最新坐标的事件对象，判断按下状态为真时再执行业务逻辑
• 鼠标抬起或移出页面时清除按下标记，避免异常

// 标记鼠标是否处于按下状态
let isMouseDown = false

document.addEventListener('mousedown', () => {
  isMouseDown = true
})

document.addEventListener('mousemove', (e) => {
  // 只有按住鼠标时才处理坐标
  if (isMouseDown) {
    console.log('按住移动中，实时坐标：', e.clientX, e.clientY)
    // 此处可添加自定义业务逻辑
  }
})

document.addEventListener('mouseup', () => {
  isMouseDown = false
})

// 可选优化：鼠标移出文档区域时取消按下状态，避免逻辑异常
document.addEventListener('mouseleave', () => {
  isMouseDown = false
})

固定频率读取坐标的实现（可选） #

如果确实需要固定频率读取坐标而非每次移动都触发，可以把最新坐标存在全局变量中，定时器读取该变量即可：

let timer = null
// 存储最新鼠标坐标
let latestX = 0
let latestY = 0
let isMouseDown = false

document.addEventListener('mousedown', () => {
  isMouseDown = true
  // 注意setInterval第二个参数单位为毫秒，16ms约等于60帧刷新率，原写法1/6000ms无意义且会造成严重性能损耗
  timer = setInterval(() => {
    if (isMouseDown) {
      console.log('hold', latestX, latestY)
    }
  }, 16)
})

document.addEventListener('mousemove', (e) => {
  // 实时更新最新坐标
  latestX = e.clientX
  latestY = e.clientY
})

document.addEventListener('mouseup', () => {
  isMouseDown = false
  clearInterval(timer)
})

内容的提问来源于stack exchange，提问作者mojo