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.

Pointer event names are similar to mouse events.

"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).

The PointerEvent interface inherits properties from MouseEvent and adds specific ones: pointerId

pointerType A string indicating the device type: "mouse", "pen", or "touch". isPrimary

pressure A normalized value (0 to 1) indicating the pressure applied by the pointer.

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).

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 property is a separate feature that controls whether or not an element can be the target of any pointer interactions.

in CSS, disables all mouse and touch interactions on an HTML element and its descendants.

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.