Summary image:

  • screenX/screenY: Relative to physical screen top-left.
  • pageX/pageY: Relative to the full document (includes scroll offset). Not supported in very old IE (≤8).
  • clientX/clientY: Relative to the visible viewport (excludes scroll). Similar conceptually to fixed positioning.

When calculating element-local coordinates: const rect = el.getBoundingClientRect(); localX = event.clientX - rect.left.