Bind pointerdown, pointermove, pointerup and pointercancel instead of separate mouse and touch listeners. Pointer Events fire for mouse, touch and pen from one API, carry a pointerId for multi-touch, and need touch-action: none in CSS to stop the browser from scrolling or zooming the canvas.
At a glance
| Fact | Value | Source |
|---|---|---|
| Core Pointer Events for input | pointerdown/move/up/cancel | developer.mozilla.org |
| CSS needed to stop scroll/zoom | touch-action: none | developer.mozilla.org |
| Sprites support input events directly | Phaser Sprite Game Objects | docs.phaser.io |
Listen for pointerdown, pointermove, pointerup and pointercancel on the canvas instead of writing separate mouse and touch handlers. The Pointer Events API fires the same events for mouse, touch and pen, each with a pointerId you use to track multiple fingers, and a pointerType field (‘mouse’, ‘touch’, ‘pen’) if you need to branch behaviour.
With Playgama MCP, an AI agent can upload the build and publish a sandbox link to test touch input on real devices.
The part that trips people up in a browser build: the browser’s own gestures compete with your input. Set touch-action: none (or at least touch-action: manipulation) on the canvas in CSS, or the page will scroll or pinch-zoom under the player’s finger instead of controlling the game. Always handle pointercancel too – it fires when the OS interrupts a touch (an incoming call, a browser gesture), and if you only listen for pointerup you can leave a control stuck in a pressed state. If you use Phaser, Sprite Game Objects already accept input events, so wiring a sprite to pointer events is a few lines rather than a manual hit-test.
If an AI agent is writing this input code for you, keep the event names and the touch-action CSS in the prompt or in a short spec file so the agent does not switch to separate mouse and touch listeners on a rewrite.
Sources
Related questions
Do I still need separate touch and mouse listeners?
No – Pointer Events cover mouse, touch and pen in one API in all current browsers, so a single set of pointer listeners is enough for a web game.
Why does my canvas scroll the page when a player drags on mobile?
The browser’s default touch gesture is still active. Set touch-action: none on the canvas element in CSS so pointer events control the game instead of page scrolling or zooming.
How do I support two-finger gestures with Pointer Events?
Track each active pointer by its pointerId in a map; every pointerdown adds an entry and every pointerup or pointercancel removes it, giving you multi-touch.
Last updated: 30 September 2026