如何在按住鼠标按钮的同时获得鼠标的实时位置

Question

我想跟踪鼠标按住的位置这里是我的鼠标按住代码

let i = null
document.addEventListener('mousedown',e=>{
    i = setInterval(()=>{
        console.log('hold',e.clientX)
    },1/6000)
})
document.addEventListener('mouseup',e=>{
    clearInterval(i)
})

但结果是 mousedown 事件 clientX 是它被点击的位置，而不是鼠标的实时位置...我如何获得鼠标的实时位置

Answer 1

也许你可以试试这个？

let start = null
let end = null
let move = null
let isHold = false

document.addEventListener('mousedown', e => {
    isHold = true
    start = e
})
document.addEventListener('mouseup', e => {
    isHold = false
    end = e
    console.log({start, end, move})
})
document.addEventListener('mousemove', e => {
    if (isHold) {
        move = e
    }
})

Answer 2

您可以在函数中创建三个不同的事件，一个检查 mousedown，一个检查 mousemove，最后一个检查 mouseup。

当触发 mousedown 时，将 truthy 变量从 false 更改为默认设置为 false，然后在您的 mousemove 事件中查看该 truthy 语句当前是否为真，如果是 log/display x 和 y 位置。如果 mouseup 被触发，将 truthy 变量设置为 false。

const box = document.getElementById("screenBox");
const coords = document.getElementById("screenCoords");

function findScreenCoords(box, coords) {
  let isDown = false
  let xpos = 0
  let ypos = 0
  
  box.addEventListener('mousedown', e => {
    xpos = e.offsetX
    ypos = e.offsetY
    isDown = true
  })

  box.addEventListener('mousemove', e => {
    if (isDown === true) {
      coords.innerHTML = `${xpos} ${ypos}`
      xpos = e.offsetX
      ypos = e.offsetY
    }
  })

  box.addEventListener('mouseup', e => {
    if (isDown === true) {
      coords.innerHTML = `${xpos} ${ypos}`
      xpos = 0
      ypos = 0
      isDown = false
    }
  })  
}

findScreenCoords(box, coords);

<div id="screenBox" style="width:400px; height:200px; background-color:#ccc;">

</div>
<div id="screenCoords" style="font-size:36px;"></div>

如何在按住鼠标按钮的同时获得鼠标的实时位置

how to get live mouse position while holding mousebutton

javascript

dom

mouseevent