Mouse, Touch, and Stylus

In the past, developers had to write separate event listeners for mice (mousedown) and touchscreens (touchstart). Today, we have Pointer Events, which unify all input methods into a single interface.

Main Events:

  • pointerdown (replaces mousedown/touchstart)
  • pointermove
  • pointerup

Huge Advantages:

  1. Universality: You write one set of code, and it magically works for mice, fingers, and styluses.
  2. Hardware Properties: You can detect the pressure of a stylus (event.pressure) or the angle it is being held at!
  3. Pointer Capture: Using el.setPointerCapture(id), you can force an element to keep receiving movement events even if the user's finger slides outside the boundaries of the element (this is perfect for building custom drag-and-drop sliders!).
Caution

To prevent Pointer Events from conflicting with the browser's built-in scrolling behavior (like swiping down to scroll), you usually need to add the CSS property touch-action: none to your draggable element.