<h2 id='mouse-position'>Mouse position (0, 0)</h2>
const mouseReading = document.getElementById('mouse-position')

const logMousePosition = function(event) {
  mouseReading.textContent = `Mouse position (${event.pageX}, ${event.pageY})`
}

// change the delay timing to experiment
$(document).on('mousemove', _.throttle(logMousePosition, 200)) // every 200ms
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
  2. https://cdn.jsdelivr.net/npm/@mig8447/lodash-debounce-throttle@4.17.5/dist/lodash-debounce-throttle.min.js