Introduction
Much of today's web content assumes that the user will be using a mouse as their pointing device. Extensions to the existing pointing device event models are required since many devices allow different forms of pointing input devices, such as pen/stylus and touch surfaces. That's where pointer events come in.
The DOM events fired for a pointing device are known as pointer events. They're made to support pointing input devices like a mouse, pen/stylus, and touch using a single DOM event model (such as one or more fingers).
The pointer is a hardware-independent device that can be used to target a specified set of coordinates on the screen. Having a single pointer event model simplifies the creation of Web sites and applications and also provides a decent user experience independent of the user's hardware. However, pointer-events define a pointerType property to analyse the device type that produced the event in instances when device-specific handling is necessary.
Mouse events (mousedown/pointerdown, mousemove/pointermove, etc.) are equivalent to the events required to handle generic pointer input. As a result, pointer event types are designed to look like mouse event types.
A pointer event also has the same attributes as a mouse event (client coordinates, target element, button states, and so on), as well as new properties for other input types, such as pressure, contact geometry, tilt, and so on. The PointerEvent interface inherits all of the MouseEvent attributes, making the content transfer from mouse to pointer events much more effortless.
Source: Stack Overflow
Pointer event properties
Pointer events have many of the same properties as mouse events, such as clientX/Y, target, and so on, as well as a few more:
- pointerId – the pointer that caused the event's unique identification.
- Allows us to use numerous pointers, such as a stylus-enabled touchscreen and multi-touch.
- pointerType- refers to the pointing device ex- "Mouse," "pen," or "touch".
- This property can be used to react differently to different pointer types.
-
isPrimary — the primary pointer is true (the first finger in multi-touch)
There are different properties for some pointer devices that monitor contact area and pressure, such as for a finger on a touchscreen:
- Width – the size of the area where the pointer (for example, a finger) makes contact with the device. When using an unsupported device, such as a mouse, it's always 1.
- Height – refers to the height of the area where the pointer makes contact with the device. Where the pointer tip isn't supported, it's always 1.
- Pressure – refers to the pointer tip's pressure, which can range from 0 to 1. Pressure must be either 0.5 (pressed) or 0 (tangential) for devices that don't support it. The normalised tangential pressure is called pressure.
- Pen-specific properties such as tiltX, tiltY, and twist indicate how the pen is positioned in relation to the surface.