Click or drag: a test bench for the rule
The bench sends real PointerEvents to the canvas, then prints what the handler decided.
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
tap, no movement CLICK
shaky tap (3 px) CLICK
slow drag (30 px) not a click
fast flick (one 90 px jump) not a click
drag and come back to the start not a click
finger tap (touch) CLICK
right mouse button not a click
press, then the browser cancels: not a click
total clicks: 3