Device-agnostic interaction
Support mouse, touch, and stylus input through one event model.
React 19+ · Type Alias
PointerEvent
PointerEvent is React’s handler type for pointer interactions on DOM components. Its event object combines pointer-specific information with inherited mouse-event properties.
How it works
PointerEvent is the React event-handler type for pointer interactions. Its event object includes pointer-specific data such as coordinates, device type, pressure, identity, and tilt, together with inherited mouse-event properties.
Syntax
(event: React.PointerEvent) => voidParameters
| Name | Type | Description |
|---|---|---|
e | React.PointerEvent | The React event object passed to the pointer handler; it includes pointer-specific properties and inherited MouseEvent properties. |
Returns
A pointer-event handler returns nothing required by React; its purpose is to respond to the event.
Key points
- PointerEvent names the React handler type for pointer-based interaction.
- onPointerDown runs when a pointer becomes active.
- onPointerUp runs when the pointer stops being active.
- onPointerMove runs when the pointer's coordinates change.
- Pointer props receive a React event object representing the interaction.
- Pointer-specific fields include an identity, device type, and pressure value.
Common mistakes
- Handle cancellation when a browser interrupts an active pointer interaction.
Example: Tracking pointer activity
function PointerTracker() {
return (
<div
onPointerEnter={e => console.log('enter', e.pointerType)}
onPointerMove={e => console.log('move', e.clientX, e.clientY)}
onPointerDown={e => console.log('down', e.isPrimary)}
onPointerUp={e => console.log('up', e.pressure)}
onPointerLeave={e => console.log('leave')}
/>
);
}A component can attach pointer handlers directly to a DOM element and read pointer-specific fields from the React event.
When to use it
Pointer tracking
Read coordinates while an input device moves over an element.
Stylus and multitouch controls
Use pressure, tilt, or pointer identity for drawing and rich input.
Interview questions
QWhat is PointerEvent in React, and what data does its event provide?
PointerEvent is the handler type used for pointer events in React. The event object exposes fields such as pointerId, pointerType, pressure, width, height, tiltX, tiltY, and twist, plus inherited mouse-event properties.
Follow-up: How would you distinguish input devices? Read pointerType, which identifies the kind of pointer involved, and use pointer-specific fields such as pressure when relevant.
QHow do you handle pointer interactions in JSX?
Use pointer props such as onPointerEnter, onPointerMove, onPointerDown, onPointerUp, and onPointerLeave on a DOM element. Each receives a React event object that can be inspected in the handler.
Follow-up: Which event should represent an interrupted interaction? Include onPointerCancel because the browser can cancel a pointer interaction.
QHow does PointerEvent relate to mouse-event data?
Pointer handlers also provide mouse-style information, including clientX, clientY, button, buttons, movementX, movementY, pageX, pageY, screenX, screenY, and modifier-key state. This lets one handler work with common coordinate and button data while retaining pointer-specific information.
Follow-up: How can a handler account for multitouch or multiple simultaneous pointers? Use pointerId to distinguish individual pointers and isPrimary to identify the primary pointer.
Related
onPointerCancelonPointerDownonPointerEnteronPointerLeaveonPointerMoveonPointerUponGotPointerCaptureonLostPointerCapture