Member-only story
👆 Pointer Events in React — The Why, How, and What
Let’s Talk About Events, More Specifically Pointer Events.
What are pointer events?
Pointer events provide a unified way of handling all input events.
Back in the good old days, we only had a mouse, and listening for events was simple. The web content assumed the user’s pointing device would be a mouse.
Nowadays we have many devices which don’t correlate to having a mouse, like phones with touch surface or pens.
How can we listen for events if the user doesn’t have a mouse?
Touch events to the rescue!
The touch events’ interfaces are relatively low-level APIs that can be used to support application-specific multi-touch interactions, such as a two-finger gesture.
A multi-touch interaction starts when a finger (or stylus) first touches the contact surface. Other fingers may subsequently touch the surface and optionally move across the touch surface. The interaction ends when the fingers are removed from the surface. During this interaction, an application receives touch events during the start, move and end phases.
Adding touch event listeners is rather simple, but you have to support both the touch and mouse:
