1
0

More than 3 years have passed since last update.

マウスを押しながら移動最中のイベントを定期的に処理(web ブラウザ内)

Last updated at Posted at 2020-06-09

こんにちは。
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))};

  1. ただし今回は真の定期的処理ではないです。真の定期的処理へ書き換えるには setTimeout(...)timer = setInterval(()=>console.log(posCurrent), timerDelta); とするべきですが、反面、マウスを押しながら移動を止めた後も処理は止まらず続行されます。 

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0