mousemove

マウスの動きをトラッキングする例

<div id="trackArea" style="width: 300px; height: 200px; background-color: #f0f0f0; position: relative;">
  <div id="tracker" style="width: 10px; height: 10px; background-color: #ff0000; border-radius: 50%; position: absolute;"></div>
</div>
<p id="output"></p>

<script>
const trackArea = document.getElementById('trackArea');
const tracker = document.getElementById('tracker');
const output = document.getElementById('output');

let throttleTimer;

trackArea.addEventListener('mousemove', function(e) {
  if (!throttleTimer) {
    throttleTimer = setTimeout(function() {
      throttleTimer = null;
      const rect = trackArea.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      tracker.style.left = x + 'px';
      tracker.style.top = y + 'px';
      
      output.textContent = `マウス位置: (${x}, ${y})`;
    }, 16); // 約60FPSでスロットル
  }
});
</script>

この例では、灰色の領域内でマウスを動かすと、赤い点がマウスカーソルを追跡します。mousemoveイベントを使用してマウスの位置を取得し、それに応じて赤い点の位置を更新しています。パフォーマンスを考慮して、イベントハンドラにはスロットリングを適用しています。