こんにちは。
web ブラウザ画面内において、マウスを押しながら移動最中のイベントを検出してみました。そしてマウス座標を定期的1に求めました。
// console.log
{x: 317, y: 178}
{x: 324, y: 169}
<!DOCTYPE html>
<html>
<body>
<script>
const timerDelta = 500; // in ms
let timer = 0, posOrigin, posCurrent;
const posMouse = e => ({x: e.pageX, y: e.pageY});
const mouseDown = e => {
posOrigin = posMouse(e);
document.addEventListener('mousemove', mouseMove_with_timer);
};
const mouseUp = e => {
document.removeEventListener('mousemove', mouseMove_with_timer);
};
const mouseMove_with_timer = e => {
posCurrent = posMouse(e);
if (!timer) {
timer = 1;
setTimeout(() => {timer=0; console.log(posCurrent)}, timerDelta);
}
};
document.addEventListener("mousedown", mouseDown, false);
document.addEventListener("mouseup", mouseUp, false);
</script>
</body>
</html>
なお、押しながら移動最中ではなく、移動を終えボタンを離したイベントを対象とするのならば、より簡素になります(下記)。
const mouseDown = e => {posOrigin = posMouse(e)};
const mouseUp = e => {console.log(posMouse(e))};
-
ただし今回は真の定期的処理ではないです。真の定期的処理へ書き換えるには
setTimeout(...)
をtimer = setInterval(()=>console.log(posCurrent), timerDelta);
とするべきですが、反面、マウスを押しながら移動を止めた後も処理は止まらず続行されます。 ↩