Ever tried to build a smooth swipe or pinch gesture on mobile only to find it firing weird events, missing touches, or blocking scroll? If you’ve been there, you know it quickly devolves into a maze of event handlers, mysterious no-ops, and contradictory docs.
I recently spent days debugging a custom gesture recognizer for a mobile web app and finally got to the bottom of how browsers handle pointer, touch, and gesture events differently on mobile versus desktop. Spoiler: it’s not just about firing different events , it’s the event order, default behaviors, and subtle browser quirks that trip you up.
Let’s get practical. I’ll share concrete examples, what’s going on under the hood, and exactly how to debug these interactions using Chrome DevTools.
The moment things got weird: touch events firing but pointer events missing
My app needed to detect a two-finger swipe. I started by listening to pointerdown, pointermove, and pointerup events because pointer events unify mouse, touch, and pen input nicely on desktop.
