Skip to content
CodeLifter

Mouse position

Pointer coordinates for mouse, pen and touch, with viewport, page and element values side by side, written at most once per frame.

CL-0046 fixesChecked 2026-10-15
A sheet of graph paper with one orange-red pin and a pencil beside it

1. The prompt

Not yet run against a named assistant · 88 words · CC-BY-4.0

Write plain JavaScript that shows the pointer position over one box. Listen for pointermove on that box, not mousemove on the document, so pen and touch work too, and set touch-action: none on the box only. Show the pointer type and three rounded coordinate pairs: clientX and clientY, pageX and pageY, offsetX and offsetY. Keep only the newest event and write the readout at most once per animation frame with requestAnimationFrame. Write with textContent, never innerHTML, show a short message on pointerleave, and add an MIT licence comment.

pointer-position.js JavaScript · 22 lines Reviewed
// MIT licence. CodeLifter editors, codelifter.com/prompts/mouse-position/
const pad = document.getElementById("pad");
const out = document.getElementById("pos");
let last = null;
let frame = 0;
function render() {
frame = 0;
const r = (n) => Math.round(n);
out.textContent =
`${last.pointerType}: viewport ${r(last.clientX)}, ${r(last.clientY)}; ` +
`page ${r(last.pageX)}, ${r(last.pageY)}; ` +
`box ${r(last.offsetX)}, ${r(last.offsetY)}`;
}
pad.addEventListener("pointermove", (e) => {
last = e; // keep only the newest event
if (!frame) frame = requestAnimationFrame(render);
});
pad.addEventListener("pointerleave", () => {
out.textContent = "The pointer left the box.";
});
2. What the prompt should produce. Load it after the markup below.

What a one-line prompt gets you

Representative output for “show the mouse position in JavaScript” and nothing else, written by the editors to show the pattern. It runs. It also leaves these gaps.

AI-generatedunreviewed
Shown for comparison. Do not ship.
// Get mouse position
document.onmousemove = function(event) {
var x = event.pageX;
var y = event.pageY;
document.getElementById("coords").innerHTML = "X: " + x + ", Y: " + y;
};
Representative one-line-prompt output, written by the editors to show the pattern. Not a recorded generation.
  1. 1 It ignores pen and touch.It listens for mouse events only. MDN describes a pointer as a hardware-agnostic representation of a mouse, a pen or a touch contact, and PointerEvent inherits the same coordinates from MouseEvent.Prompt line: “Listen for pointermove on that box, not mousemove on the document.”
  2. 2 It reports page coordinates only.pageX counts from the left edge of the whole document, so it includes scrolling; a fixed tooltip needs clientX and a canvas usually needs offsetX. The reviewed readout shows all three pairs so you can pick.Prompt line: “Show the pointer type and three rounded coordinate pairs.”
  3. 3 It replaces other scripts' handlers.Assigning document.onmousemove overwrites any handler another script set there. The reviewed code adds a listener to one element.Prompt line: “Listen for pointermove on that box, not mousemove on the document.”
  4. 4 It writes to the page on every event.Every move rewrites the DOM, however fast events arrive. The reviewed code keeps the newest event and writes once per animation frame.Prompt line: “Write the readout at most once per animation frame with requestAnimationFrame.”
  5. 5 It writes with innerHTML.The readout is parsed as HTML. The reviewed code uses textContent, so nothing it writes is treated as markup.Prompt line: “Write with textContent, never innerHTML.”
  6. 6 It carries no licence.Nothing records who wrote it or on what terms. The reviewed script starts with an MIT licence line and a credit.Prompt line: “Add an MIT licence comment.”

Install it

  1. 1Paste the readout paragraph and the box where you want them. They need no build step and no library.
  2. 2Change the id values if pad or pos are already used on your page.
  3. 3Replace the inline style with your own CSS, keeping touch-action: none on the tracking box if you want touch input.
  4. 4Load pointer-position.js after the markup and keep its licence comment, or credit CodeLifter in your notices.
  5. 5Test with a mouse, then with touch emulation in your browser's developer tools, then on a real phone if you have one.
index.html HTML · 3 lines Reviewed
<p id="pos">Move the pointer over the box.</p>
<div id="pad" style="height:200px;border:1px solid;touch-action:none"></div>
<script src="pointer-position.js"></script>

Questions and answers

Has this prompt been tested with an assistant?

Not yet. The editors wrote the prompt to describe the reviewed code, which they wrote and tested with AI assistance and re-ran in a scripted DOM test on 2026-10-15. Nobody has run the prompt against a named assistant, so compare any answer with the code above.

Should I use clientX or pageX?

Use clientX for anything positioned against the viewport, such as a fixed tooltip, and pageX for elements placed in the document. MDN says clicking the left edge of the viewport always gives clientX 0 however far the page is scrolled, while pageX includes the scrolled part: 200 pixels scrolled away plus 100 pixels in gives 300.

Why does offsetX jump over a child element?

MDN defines offsetX from the padding edge of the event's target node, and the target changes when the pointer crosses into a child. For a stable position inside a container, subtract the container's getBoundingClientRect() left and top from clientX and clientY.

Why set touch-action: none on the box?

MDN's touch-action page says panning and pinching are handled by the browser by default, and a page using pointer events receives pointercancel when the browser takes over a gesture. The same page warns that touch-action: none may stop zooming, which low-vision readers rely on, so keep it on the box only.

Do I still need mousemove as well as pointermove?

No. PointerEvent inherits from MouseEvent, so pointermove carries the same coordinates and also fires for pen and touch. MDN notes that browsers often send both pointer and mouse events, for older code.

How do I know which device moved?

Read the event's pointerType property. MDN lists it as the device type that caused the event, such as mouse, pen or touch, and the reviewed readout prints it first.

Why are the coordinates decimals?

MDN records that pageX was originally an integer and was redefined as a double-precision value to allow subpixel precision; clientX and offsetX are doubles too. The script rounds them before printing.

Can I get the mouse position without an event?

Not directly; the browser reports the position inside events. Store the coordinates from the latest pointermove in a variable and read that variable when you need it, which is what the reviewed code does with the last event.

Can I use the script in a commercial project?

Yes. It is MIT licensed: keep the licence line or credit CodeLifter in your notices, and you can use, change and sell work that includes it.

Sources

  1. 1PointerEventMDN Web Docs, checked 2026-10-15
  2. 2MouseEvent: clientX propertyMDN Web Docs, checked 2026-10-15
  3. 3MouseEvent: pageX propertyMDN Web Docs, checked 2026-10-15
  4. 4MouseEvent: offsetX propertyMDN Web Docs, checked 2026-10-15
  5. 5touch-actionMDN Web Docs, checked 2026-10-15

More prompts

All six prompts