The Pointer Events API is a modern web standard that provides a unified input model for handling various pointing devices, such as a mouse, pen/stylus, and touch (finger).
It simplifies development by consolidating separate mouse and touch event models into a single, hardware-agnostic system.
For the modern web, pointer events is the recommended approach to create interactive interfaces that provide a consistent experience for all users, regardless of hardware.
Event Types
Pointer event names are similar to mouse events .
Just replace "mouse" with "pointer":
- pointerdown Fired when a pointer becomes active (button pressed, physical contact).
- pointerup Fired when a pointer is no longer active (button released, contact ended).
- pointermove Fired when a pointer changes coordinates.
- pointerover Fired when a pointer is moved into an element.
- pointerout Fired when a pointer moves out of an element.
- pointerenter Similar to pointerover, but does not bubble up through the DOM hierarchy.
- pointerleave Similar to pointerout, but does not bubble.
- pointercancel Fired when the system cancels the pointer interaction (interrupted by the OS opening a system menu).
Event Properties
The PointerEvent interface inherits properties from MouseEvent and adds specific ones:
- pointerId A unique ID for each pointer, allowing tracking in multi-touch scenarios.
- pointerType A string indicating the device type: "mouse", "pen", or "touch".
- isPrimary A boolean true for the primary pointer (the first finger in a multi-touch).
- pressure A normalized value (0 to 1) indicating the pressure applied by the pointer.
Pointer Events API Benefits
Developers can write a single set of event listeners ( a unified model ) that work across multiple input types, reducing code duplication and complexity.
In addition to standard mouse event properties (like client coordinates), PointerEvent objects include new properties specific to other inputs , such as pressure, tiltX, tiltY, width, and height, (useful for pen and touch interactions).
Methods like setPointerCapture() allow an element to receive pointer events when the pointer moves outside its boundaries (useful for sliding or dragging).
The API can track multiple simultaneous touch points , unlike traditional mouse events.
CSS pointer-events Property
The pointer-events CSS property is a separate feature that controls whether or not an element can be the target of any pointer interactions.
The style="pointer-events: none; in CSS, disables all mouse and touch interactions on an HTML element and its descendants.
The style="pointer-events: auto; in CSS, restores the default behavior.
This CSS property is useful for creating layered interfaces, or temporarily disabling interactions on certain elements without modifying the underlying JavaScript logic.