prepareSurface()
Make an element behave as an input surface on touch devices: no browser panning or pinch-zooming over it, no text selection, no tap flash, and (optionally) no context menu, so right-drag can be a gesture. Use this instead of per-app touch-action CSS. DOM-only.
function prepareSurface(el: HTMLElement, opts?: object): () => void;Defined in: engine/src/input/core.ts:539
Parameters
| Parameter | Type | Description |
|---|---|---|
el | HTMLElement | - |
opts? | { contextMenu?: boolean; } | contextMenu: false suppresses the context menu over the element. |
opts.contextMenu? | boolean | - |
Returns
A function that restores the previous styles and removes the listener.
() => void
Example
prepareSurface(canvas, { contextMenu: false });
const input = createInput(canvas);makeTouchControls()
Add on-screen joysticks and buttons that feed the input's virtual channel, so a game binds touch:move.x beside key:KeyA and pad:LeftX. The controls are a fixed overlay of their own elements, so fingers on them never reach the canvas gestures. DOM-only.
recogniseGestures()
Recognise taps, double-taps, long-presses, drags, pinches and wheel steps on an input. Tap versus drag is decided on total travel since the pointer went down, so a slow pan still counts as a drag. Several recognisers can share one input: the one with the higher priority hears events first and...