From events to gestures
Pointer events report low level facts like down, move, and up. A gesture recognizer turns a stream of those into meaning such as tap, swipe, or pinch by tracking position, time, and distance.
- A tap is a down and up close in space and time
- A swipe is movement past a distance threshold in a direction
- A pinch needs two pointers and tracks the distance between them
Unifying input
Use the pointer events model so mouse, touch, and pen flow through one code path. Capture the pointer so a drag keeps receiving events even when it leaves the element.
Recognition flow
Avoiding conflicts
Set touch action so the browser knows which gestures you handle and which it should keep, like vertical scrolling. Add a small movement threshold so a shaky tap is not misread as a drag.
Key idea
Build gesture recognizers on the unified pointer model, classify intent with distance and time thresholds, and declare touch action so your gestures and native scrolling do not fight.