Hover once per frame, and touch has no hover
Move the mouse over the three balls: the one under it glows and the cursor becomes a hand. The text output comes from simulated events.
Pointer events give one set of events for a mouse, a finger and a pen. You use them to highlight a part on hover (once per frame), to tell a click from a drag by distance, to change the cursor, and to treat touch honestly: a finger has no hover.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write isClick(down, up, limit = 8) that takes two { x, y } points and returns whether they are within limit pixels.
Write a pointerleave and pointercancel pair that makes sure no part stays highlighted and no press stays remembered.
Explain it without notes
Why is a click detected by distance and not by time between press and release?
A phone user taps a thin part and nothing happens. Name two causes and fixes.
Console
Nothing logged yet.Expected console output
50 moves over the saddle -> hovered: saddle | raycasts: 1 | cursor: pointer
mouse leaves -> hovered: nothing | cursor: default
touch move over the bell -> hovered: nothing (touch has no hover)
touch tap on the bell -> highlighted: bell