Я хочу отслеживать положение удерживаемой мыши вот мой код для удержания мыши

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

Но оказывается, что событие on mousedown clientX - это позиция, в которой он был нажат, а не текущая позиция мыши ... как я могу удерживать живую позицию мыши

0
mojo 25 Май 2021 в 06:10

2 ответа

Лучший ответ

Может ты можешь попробовать это?

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
    }
})
0
Mr.LeiDeSen 25 Май 2021 в 06:20

Вы можете создать три разных события в своей функции: одно проверяет mousedown, второе проверяет mousemove и последнее, которое проверяет mouseup.

Когда запускается mousedown, измените правдивую переменную с false, по умолчанию установленную на false, затем в событии mousemove посмотрите, истинно ли это правдивое утверждение в настоящее время, если это так, зарегистрируйте / отобразите положение x и y. Если курсор мыши запущен, установите для переменной true значение 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>
0
dale landry 25 Май 2021 в 06:43